Vue的{{}}/v-html/v-text三者之间的区别

代码示例

<div id="app">
    <h2>看是否能覆盖原有内容</h2>
    <p>{{name1}}乘舟将欲行</p>
    <p v-text="name1">乘舟将欲行</p>
    <p v-html="name1">乘舟将欲行</p>
    
    <h2>看是否能解析标签</h2>
    <p>{{name2}}</p>
    <p v-text="name2"></p>
    <p v-html="name2"></p>
</div>

<script src="引入vue文件"></script>
<script>
    let vm=new Vue({
        el:"#app",
        data(){
            return{
                name1:"李白",
                name2:" <i>李白</i>"
            }
        }
    })

运行结果

总结

• {{}}不会覆盖标签原有的内容,不会解析html标签

• v-text会覆盖标签原有的内容,不会解析html标签

• v-html会覆盖标签原有的内容,会解析html标签

个人拙见，敬请斧正