Vue 指令01——v-test和v-html的使用

Vue 指令01——v-test和v-html的使用

V-test指令

作用：替换标签里的文本内容

v-test的实例

<!--程序1-->
 <!--把h2标签的”1234“，替换成”笑哈哈“-->
<div>
    <h2 v-text="message">1234</h2>
</div>


<!--程序2-->
 <!--把h2标签的”12“，替换成”笑哈哈“ ,并加上”哭兮兮“-->
<div>
    <h2>12{{message+'哭兮兮'}}</h2>
</div>

var app=new Vue({
    el:"#app",
    data:{
        message:"笑哈哈"
    }
})

v-html指令

作用：在标签内容替换成标签

v-html的实例

<!--把h2标签的”1234“，替换成”a标签链接到百度“-->
<div>
    <h2 v-html="message">1234</h2>
</div>

var app=new Vue({
    el:"#app",
    data:{
        message:"<a scr='https://www.baidu.com'>百度</a>"
    }
})