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

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

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

<!--  插值表达式  -->
   <h2>{{name}}</h2>
<!--  v-text  -->
   <h2 v-text="baidu1"></h2>
   <h2 v-html="baidu"></h2>

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

<div id="container">
    <h2>{{name}}</h2>
    <h2>{{message}}</h2>
</div>

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

总结：

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

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

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

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

<div id="container">
    <h2 v-text="baidu1"></h2>
    <h2 v-html="baidu"></h2>
</div>

        new Vue({
            el:"#container",
            data:{
                baidu1:"百度",
                baidu:"<a href='https://www.baidu.com/'>点击跳转</a>"
            }
        })