vue的模板语法有三种,分别为:
- 插值表达式 {{…}}
- v-text
- v-html
当name为js表达式时,三者是看不出来区别的:
<body>
<div id="app">
{{name + 'lee'}} <!--插值表达式,第一种模板语法-->
<div v-text="name + 'lee'"></div>
<div v-html="name + 'lee'"></div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
name:"dell"
}
})
</script>
</body>
效果如下:
当三种模板语法后面跟HTML结构元素时,会显示出不同的效果:
<body>
<div id="app">
{{name + 'lee'}} <!--插值表达式,第一种模板语法-->
<div v-text="name + 'lee'"></div>
<div v-html="name + 'lee'"></div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
name:"<h1>dell</h1>"
}
})
</script>
</body>
这样的可以看出v-text和插值表达式的效果是一样的,但仅仅是显示内容,但是v-html会对内容进行解析,然后再显示。