在Vue中，v-if和v-show是两种常用的指令，用于控制组件的显示和隐藏。下面是一些使用v-if和v-show的例子：
v-if 在编译过程中会被转化成三元表达式,条件不满⾜时不渲染此节点。
v-show 会被编译成指令，条件不满⾜时控制样式将对应节点隐藏（display:none）
v-if
html
<template>
<div>
<p v-if="showMessage">Hello, Vue!</p>
<button @click="toggleMessage">Toggle Message</button>
</div>
</template>
<script>
export default {
data() {
return {
showMessage: false
};
},
methods: {
toggleMessage() {
this.showMessage = !this.showMessage;
}
}
};
</script>
在上面的例子中，当showMessage的值为true时，段落元素会被渲染到DOM中。当showMessage的值为false时，段落元素不会被渲染。用户可以通过点击按钮来切换showMessage的值。
v-show文章来源：https://www.toymoban.com/news/detail-813938.html
html
<template>
<div>
<p v-show="showMessage">Hello, Vue!</p>
<button @click="toggleMessage">Toggle Message</button>
</div>
</template>
<script>
export default {
data() {
return {
showMessage: false
};
},
methods: {
toggleMessage() {
this.showMessage = !this.showMessage;
}
}
};
</script>
在上面的例子中，无论showMessage的值为true还是false，段落元素始终会被渲染到DOM中。用户可以通过点击按钮来切换元素的可见性。当showMessage的值为false时，元素会被设置为不可见。当showMessage的值为true时，元素会被设置为可见。文章来源地址https://www.toymoban.com/news/detail-813938.html
到了这里，关于VUE v-if 和 v-show 区别和例子的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![FE_Vue学习笔记 条件渲染[v-show v-if] & 列表渲染[v-for] 列表过滤 列表排序](https://imgs.yssmx.com/Uploads/2024/02/446581-1.png)
