v-if&v-else的使用

通过是用v-if和v-else我们可以根据条件进行渲染。注意，v-if和v-else在false条件下，不会输出任何元素，并不是通过cssdisplay:none来实现的。

代码：

<template>
  <div>
    <div v-if="show1">show1:{{show1}}</div>
    <div v-if="show2">show2:{{show2}}</div>
    <div v-else>show2:{{show2}}</div>
  </div>
</template>

<script>

export default {
    data(){
        return {
           show1:false,
           show2:true,
        }
    }
}
</script>

<style>
</style>

页面输出show2:true，可以看到只输出了show2。

注意事项

v-if、v-else如果用在自定义组件上面，如果条件发生变换，那么会导致该组件的生命周期发生变化。比如会触发mounted、destroyed等钩子，因为在false情况下会销毁组件，如果使用了缓存组件keeplived进行包裹，组件不会被销毁，但会触发activated、deactivated等钩子。