Vue文本绑定方式：
// 1. 模板语法
{{ message }}
// 2. v-text
<p v-text="message"></p>
// 3. v-html
<p v-html="message"></p>
模板语法 与 v-text的区别：
在网络延迟的情况下，比如2-3秒之后才载入js脚本，那么双括号 {{}} 会先渲染出来
下面我们模拟下这个过程。
<body>
<div id="app">
<p>{{ text }}</p>
<p v-text="text"></p>
</div>
<script>
setTimeout(() => {
let script = document.createElement('script');
script.src = 'app.js';
document.body.appendChild(script, document.getElementsByName('script')[0])
}, 2000)
</script>
</body>
app.js
new Vue({
el: '#app',
data() {
return {
text: 'text'
}
}
})
如下图：浏览器执行上面代码时，会先渲染出 {{ text }}，等待JS载入之后才会渲染字符串 text
v-html会解析html标签
使用v-html很容易被xss攻击
<body>
<div id="app">
<p v-html="text"></p>
<p>{{ text }}</p>
<p v-text="text"></p>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
text: '<img src="xxx" onerror="alert(\'xss\')">'
}
}
})
</script>
执行结果如下图：
