v-text
-
之前我们学习过 大括号表达式 {{ }}
-
但是这种方式有一些弊端,当网速卡顿或者出现BUG时候就会暴露我们实例中的数据名 {{msg}}
-
Vue给我们提供了一个内部指令,v-text 来处理这个问题。
核心代码:
<span v-text='msg'><span/>
v-html
- 当js中穿插 html 代码块时,可以使用 v-html
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text & v-html</title>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
<span v-text="msg"></span><br/>
<span v-html="name"></span>
</div>
<script>
const app = new Vue({
el:'#app' ,
data: {
msg:'你好,中国' ,
name:'<h1>你好中国<h1/>'
}
})
</script>
</body>
</html>
总结:
双大括号会将数据解释为纯文本,而非HTML。为了输出真正的HTML,你就需要使用v-html 指令。 需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。