2021-08-07 Vue前端v-text，v-html

v-text设置标签的文本值(textContent属性)

    <div id="app">
        <h2 v-text="message"></h2><!--方法一：内部的文字会被message替换掉-->
        
        <h2 v-text="message+'内容'"></h2><!--表达式内部可以添加内容-->

        <h2 >上海{{message+"使用了表达式"}}</h2><!--方法二(使用差值表达式)：内部文字不会替换-->
    </div>

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

总结：

 

v-html设置标签的innerHTML

    <div id="app2">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>

   var app2=new Vue({
            el:"#app2",
            data:{
                content:"<a href='http://www.itheima.com'>零一网站跳转</a>"
            }
        })

结果截图：

 总结：