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只是当做字符串处理的!根据实际问题可以到时候选择相应的模板语法进行渲染!

本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《Vue入门详解之模板语法插值表达式,v-html和v-text
分享到:更多

相关推荐

未登录,暂时无法评论和查看评论!

点击这里给我发消息点击此处联系博主!