在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
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时，元素会被设置为可见。