首先新建一个小demo
html
<div id="app">
<div>{{name}}</div>
<div v-text="name"></div>
<div v-html="name"></div>
</div>
js
var app = new Vue({
el:'#app',
data:{
name:"<h1>Min</h1>"
}
})
我们由此可以看出v-html和v-text的区别,v-html会自动解析h1标签,v-text不会
在v-text等v开头的指令后面所跟的其实都是js表达式,在其中我们不仅可以加一些变量,还可以加字符串
我们对上面的html代码和js代码进行修改
html
<div id="app">
<div>{{name + ' min'}}</div>
<div v-text="name + ' min'"></div>
<div v-html="name + ' min'" ></div>
</div>
js
<script>
var app = new Vue({
el:'#app',
data:{
name:"Min"
}
})
</script>