本文详细比较了Vue.js中的v-html和v-text在内容渲染上的区别，以及v-show与v-if在条件渲染、DOM操作和性能影响方面的不同，帮助开发者理解和选择合适的指令使用。
1.v-html、v-text
两者的区别是，v-html可以渲染data里面的css内容和样式，v-text只能渲染data里的内容。
<body>
<div id="cont">
<h1>{{title}}</h1>
<p>
{{msg}}
</p>
<div v-html="data"></div>
<div v-text="data"></div>
</div>
</body>
<script>
var vm = new Vue({
el:"#cont",
data:{
title:'哈哈哈',
msg:'你好，张三',
data:"<h2>星期一</h2>"
}
})
</script>
2.v-show、v-if
v-show=“布尔”
v-if：v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染
v-show：v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
<body>
<div id="app">
<h1 v-show="flag">{{msg}}</h1>
<h1 v-if="flag">哈哈，没想到吧</h1>
<h1 v-else>真的没想到</h1>
</div>
</body>
<script>
const vm = new Vue({
el:"#app",
data:{
msg:"我来了",
flag:false
}
})
</script>
这里v-show 和v-if 的区别是：
（1）“v-show”只编译一次；而“v-if”不停地销毁和创建
（2）“v-if”更适合于带有权限的操作，渲染时判断权限数据
（3）v-show更适合于日常使用，可以减少数据的渲染，减少不必要的操作
（1）v-show本质就是标签display设置为none，控制隐藏
（2）v-if是动态的向DOM树内添加或者删除DOM元素
v-show其实就是在控制css；v-show都会编译，初始值为false，只是将display设为none，但它也编译了。
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-if初始值为false，就不会编译了。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
