插值表达式与v-text、v-html详解

一、插值表达式与v-text&v-html的区别

1.插值表达式不依赖于标签，可直接放在元素体内使用，v-text与v-html依赖于标签。

   {{name}}

   
   

2.插值表达式会有插值闪烁的问题，在网络卡顿的情况下，页面先被读取出来，此时vue还未被读取，则插值表达式{{name}}就会直接展示到页面上，待vue被读取到的时候，对应的插值表达式才会被取代为vue要展示的数据。下面通过计时器来模仿插值闪烁现象。

    {{name}}
    {{message}}

    setInterval(()=>{
        new Vue({
            el:"#container",
            data:{
                name:"窗外暴雨再狂澜",
                message:"淋不湿屋内的你"
            }
        })
    },2000)

总结：

插值表达式：{{}} 不依赖于标签，但会有插值闪烁的问题。

v-text v-html：依赖于标签，但可以解决插值闪烁的问题。

二、v-text 与 v-html的区别

v-text只能渲染文本，v-html不仅能渲染文本，还能渲染标签。

        new Vue({
            el:"#container",
            data:{
                baidu1:"百度",
                baidu:"点击跳转"
            }
        })