v-text、v-html、文本插值比较

绿茶程序媛

于 2019-12-15 18:43:41 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_43137725/article/details/103551687

22 篇文章

订阅专栏

本文对比了Vue中v-html、v-text和文本插值的用法，强调v-html能解析字符串标签为真实HTML，而v-text与文本插值会替换原有内容，且文本插值在渲染时可能出现闪烁问题，建议配合v-cloak使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

它与其它二者最不同的地方，是它可以识别字符串的标签，自动将其解析为标签。

注：msg会覆盖div之间的值

<div v-html="msg"></div>

let vm = new Vue({
    el: '#app',
    data: {
        msg: '<h1>你好</h1>'
    },
});

v-text 将变量是什么则解析为什么。

<div v-text="msg"></div>

let vm = new Vue({
    el: '#app',
    data: {
        msg: '<h1>你好</h1>'
    },
});

注：msg会覆盖div之间的值

文本插值是相对最方便的，但是它会有在解析vue的时候会有闪烁问题，需要结合v-cloak使用

<div>{{msg}}</div>

let vm = new Vue({
    el: '#app',
    data: {
        msg: '<h1>你好</h1>'
    },
});

v-text、v-html、文本插值 比较