vue数据绑定html

html标签的纯文本显示/被当做html标签处理；

1）使用两个大括号时，假如字符串内容是html标签，那么不会被转义；

2）使用三个大括号时，字符串内的html标签会被直接转义

a.两个大括号：

 1 <div id="app">
 2     {{html}}
 3 </div>
 4 <script>
 5     var vm = new Vue({
 6         el:"#app",
 7         data: {
 8             html:"<span>span</span>"
 9         }
10     })
11 </script>  

输出结果：

1 <span>span</span>  

b.三个大括号：

 1 <div id="app">
 2     {{{html}}}
 3 </div>
 4 <script>
 5     var vm = new Vue({
 6         el:"#app",
 7         data: {
 8             html:"<span>span</span>"
 9         }
10     })
11 </script>
12 <script>
13     function load() {
14         vm.$mount("#app");
15     }
16 </script>  

输出：

1 span

3）插入内容的数据绑定无效（在没有用partials的情况下），使用两个大括号，三个大括号

 1 <div id="app">
 2     {{{html}}}
 3 </div>
 4 <script>
 5     var vm = new Vue({
 6         el:"#app",
 7         data: {
 8             html: "<span>span{{val}}</span>",
 9             val: "11"
10         }
11     })
12 </script>
13 <script>
14     function load() {
15         vm.$mount("#app");
16     }
17 </script>          

输出：

span{{val}}

说明没有数据绑定。

4）禁止在用户提交的内容上动态渲染，否则会受到XSS攻击

5）插值也可以用在html标签的属性中，例如class，或者id，或者其他。

但是Vue.js的指令和特殊性内是不可以用插值的。