VUE v-if 和 v-show 区别和例子

在Vue中，v-if和v-show是两种常用的指令，用于控制组件的显示和隐藏。下面是一些使用v-if和v-show的例子：

v-if 在编译过程中会被转化成三元表达式,条件不满⾜时不渲染此节点。

v-show 会被编译成指令，条件不满⾜时控制样式将对应节点隐藏（display:none）

v-if

html
 
  

在上面的例子中，当showMessage的值为true时，段落元素会被渲染到DOM中。当showMessage的值为false时，段落元素不会被渲染。用户可以通过点击按钮来切换showMessage的值。

v-show

html
 
  

在上面的例子中，无论showMessage的值为true还是false，段落元素始终会被渲染到DOM中。用户可以通过点击按钮来切换元素的可见性。当showMessage的值为false时，元素会被设置为不可见。当showMessage的值为true时，元素会被设置为可见。