我们来看一下简单的模板语法,在Vue中有三种模板语法用来渲染model(数据层),插值表达式(就是{{}},双花括号表达法),v-text和v-html三种!那么这三种有什么区别哪?我们先简单看一个实例!
<div?id="app">
????<span>{{desc}}</span>
????<span?v-html="desc"></span>
????<span?v-text="desc"></span>
</div>
<script>
????var?app=new?Vue({
????????el:"#app",
????????data:{
????????????desc:"你好世界,hello?world!",
????????????tpl:`<h1>?哈哈哈哈,Vue!??模板语法!!!</h1>`,
????????}
????})
</script>
看一下运行效果
发现三种方式都能正确去渲染页面!
其实这三者还是有区别的,那么我们接下来再看一个例子
<div?id="app">
????<span>{{tpl}}</span>
????<span?v-html="tpl"></span>
????<span?v-text="tpl"></span>
</div>
<script>
????var?app=new?Vue({
????????el:"#app",
????????data:{
????????????tpl:`<h1>?哈哈哈哈,Vue!??模板语法!!!</h1>`,
????????}
????})
</script>
发现我们渲染的数据如果是hml语法,通过v-html是可以直接解析出来的,而插值表达式和v-text只是当做字符串处理的!根据实际问题可以到时候选择相应的模板语法进行渲染!