Vue入门详解之模板语法插值表达式,v-html和v-text
我们来看一下简单的模板语法,在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只是当做字符串处理的!根据实际问题可以到时候选择相应的模板语法进行渲染!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-9-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读