正文
vue数据绑定html
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html标签的纯文本显示/被当做html标签处理；
1）使用两个大括号时，假如字符串内容是html标签，那么不会被转义；
2）使用三个大括号时，字符串内的html标签会被直接转义
a.两个大括号：
<div id="app">
{{html}}
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
html:"<span>span</span>"
}
})
</script>
输出结果：
<span>span</span>
b.三个大括号：
<div id="app">
{{{html}}}
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
html:"<span>span</span>"
}
})
</script>
<script>
function load() {
vm.$mount("#app");
}
</script>
输出：
span
3）插入内容的数据绑定无效（在没有用partials的情况下），使用两个大括号，三个大括号
<div id="app">
{{{html}}}
</div>
<script>
var vm = new Vue({
el:"#app",
data: {
html: "<span>span{{val}}</span>",
val: "11"
}
})
</script>
<script>
function load() {
vm.$mount("#app");
}
</script>
输出：
span{{val}}
说明没有数据绑定。
4）禁止在用户提交的内容上动态渲染，否则会受到XSS攻击
5）插值也可以用在html标签的属性中，例如class，或者id，或者其他。
但是Vue.js的指令和特殊性内是不可以用插值的。
