vue有很多模板语法，本文来说一下其中的几个：
- 插值表达式
- v-text
- v-html
代码
- <div id="app">
- <div>{{name}}</div>
- <div v-text="name"></div>
- <div v-html="name"></div>
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- name: "<h1>hello</h1>"
- }
- })
- </script>
效果
由上图，我们可以看出除了v-html语法可以解析渲染h1标签以外，插值表达式和v-text都是以转义的效果来输出的，这是它们的一个区别。
总结(以前面代码为例)
- 插值表达式：以两个花括号开始，两个花括号结束，括号内的内容绑定为data中name的数据
- v-text：div中index的内容绑定为data中name的数据
- v-html：div中innerHTML的内容绑定为data中name的数据，并且会解析渲染html元素
另外
vue指令后的值，也就是v-xxxx="name"中的name此时不是字符串，而是一个js表达式，而且后面可以拼接字符串。代码如下：
- <div id="app">
- <div>{{name + 'world'}}</div>
- <div v-text="name + 'world'"></div>
- <div v-html="name + 'world'"></div>
- </div>
- <script>
- var vm = new Vue({
- el: "#app",
- data: {
- name: "hello"
- }
- })
- </script>
效果：
微信小程序
互联网开发，终身学习者，欢迎您的关注！
