3.3 内容渲染指令
内容渲染指令是用来辅助开发者渲染DOM元素中的文本内容。
3.3.1常用的内容渲染指令：
1.v-text
2.{{ }}
3.v-html
3.3.2 v-text
用法示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 要渲染的DOM --> <p v-text="username"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', // 要渲染的数据 data: { username: '张三' } }) </script> </body> </html>
v-text的缺点：会覆盖元素内部原有的内容
3.3.3 {{}} 插值表达式
vue提供的{{}}语法是用来解决v-text会覆盖默认文本内容的问题，这种{{}}语法的专业名称是插值表达式。{{}}在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容。使用{{}}可以将对应的值渲染到元素的内容节点中。
用法示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p>姓名：{{ username }}</p> <p>性别：{{ gender }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { username: "lisi", gender: "男" } }) </script> </body> </html>
3.3.4 v-html
v-text和{{}}只能渲染纯文本内容，如果要把包含html标签的字符串渲染为页面的html元素，需要使用v-html。
用法示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div v-html="content"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { content: "<h1>你好</h1>" } }) </script> </body> </html>
