Vue条件渲染

一、v-if和v-show区别

v-if和v-show都是Vue中的条件渲染指令，它们可以根据给定的表达式的真假条件来显示或隐藏元素。但是，它们的实现方式有所不同。

v-if：根据表达式的值的truthy还是falsy来销毁或重建元素及它的所有子组件。当条件为假时，元素会从DOM中删除，当条件为真时，元素会重新渲染，并且任何初始化的状态也会重新被计算。因此，当需要在条件真假之间切换频繁时，v-if是慢的。

v-show: 仅仅是基于CSS的切换。无论条件是什么，元素总是会被渲染，只是简单地设置CSS的display属性。因此，当需要频繁切换显示/隐藏时，v-show更加快速。

二、v-if的高级用法

除了基本的条件渲染功能，v-if还有以下高级用法。

1、v-else

v-else可以在v-if指令的后面使用，用于在条件不满足时显示备选内容。



   
  
    这是一个v-if元素

   

   
  
    这是一个备选元素

2、v-else-if

v-else-if可以在v-if指令后面使用，用于在首个v-if指令条件不满足时，执行下一个v-if指令条件的判断。



   
  
    这是类型A元素

   

   
  
    这是类型B元素

   

   
  
    这是类型C元素

   

   
  
    这是备选元素

3、在模板中使用v-if

有时候，我们需要在模板中直接使用v-if指令，这时，可以使用

三、v-show的高级用法

除了基本的条件渲染功能，v-show还有以下高级用法。

1、用v-show通过JavaScript控制元素的可见性

v-show指令除了可以切换元素的可见性，还可以通过 JavaScript代码来控制元素的可见性。



   
<script>
export default {
  data() {
    return {
      visible: true
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    }
  }
}
</script>

2、用v-show结合transition过渡效果

可以使用Vue内置的过渡系统来为v-show元素添加过渡效果。



   

<script>
export default {
  data() {
    return {
      visible: true
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
    }
  }
}
</script>