在 Vue 中 v-show 和 v-if 都能实现元素的显示或隐藏，但是两个指令还是有些不一样的。这里就简单写一下 v-show 和 v-if 两个指令的区别和用法。

v-show

v-show 的功能是条件展示，如果条件为 true 就显示，否则就隐藏。v-show 的显示和隐藏主要是更改 CSS 的 display 属性，并不会重新渲染或删除元素。

使用方法

<template>
  <div id="app">
    <button type="button" @click="boxShow = !boxShow">显示/隐藏</button>
    <div class="box" v-show="boxShow"></div>
  </div>
</template>
export default {
  name: 'app',
  data () {
    return {
      boxShow: true
    }
  }
}

div 的 v-show 绑定了 data 中的 boxShow，boxShow 为 true div 就会显示，为 false div 会隐藏。所以只要改变 boxShow 就能让 div 显示或隐藏。

效果如下：

v-show的效果

下面是 v-show 的 DOM 变化：

v-show的DOM变化

可以看到如果条件为 false style 就会加入 display: none。

使用场景

v-show 无论初始值为 true 还是 false 元素都会被渲染，显示和隐藏也只是更改 display。比较适合用在一些需要平凡切换显示和隐藏的场景，例如对话框之类的。

v-if

v-if 的功能是条件渲染，只有条件为 true 才会渲染。如果 v-if 的初始值为 false ，元素就不会渲染。如果中途改变 v-if 的值为 false ，元素会被删除。

使用方法

<template>
  <div id="app">
    <button type="button" @click="boxShow = !boxShow">显示/隐藏</button>
    <div class="box" v-if="boxShow"></div>
  </div>
</template>
export default {
  name: 'app',
  data () {
    return {
      boxShow: true
    }
  }
}

v-if 绑定了 boxShow ，如果 boxShow 为 true div 就会被渲染，否则 div 就会被删除。v-if 的用法和 v-show 是差不多的。

v-if 的外观效果和 v-show 差不多，下面是 v-if 的 DOM 变化：

v-ifDOM变化

可以看到如果条件为 false 元素会被直接删除，如果条件为 true 元素会被重新渲染。

配合 v-else 使用

v-else 需要配合 v-if 使用，如果条件为 true 就渲染 if 元素，否则就渲染 v-else 元素。

用法如下：

<template>
  <div id="app">
    <button type="button" @click="box1 = !box1">切换box</button>
    <div class="box" v-if="box1">box1</div>
    <div class="box" v-else>box2</div>
  </div>
</template>
export default {
  name: 'app',
  data () {
    return {
      box1: true
    }
  }
}

上面的代码只要 v-if 的条件为 true 就会渲染第一个 div，否则就渲染第二个 div。

注意！v-else 元素必须紧跟在 v-if 元素的后面，否则将不会被识别。

效果如下：

v-else效果

配合 v-else-if 使用

v-else-if 也需要配合 v-if 使用，可以做连续判断。

用法如下：

<template>
  <div id="app">
    <button type="button" @click="type = 'A'">A</button>
    <button type="button" @click="type = 'B'">B</button>
    <button type="button" @click="type = 'C'">C</button>
    <button type="button" @click="type = ''">无</button>
    <div class="box" v-if="type === 'A'">A</div>
    <div class="box" v-else-if="type === 'B'">B</div>
    <div class="box" v-else-if="type === 'C'">C</div>
    <div class="box" v-else>无</div>
  </div>
</template>
export default {
  name: 'app',
  data () {
    return {
      type: 'A'
    }
  }
}

上面的 v-if 和 v-else-if 都绑定了 data 中的 type，只有条件满足才会渲染，如果都不满足就渲染 v-else 的元素。

效果如下：

v-else-if效果

使用场景

因为 v-if 会重新渲染或删除元素，而且如果初始条件为 false 就不会渲染。比较适合用在一些不需要平凡切换或内容较多的元素。例如不同页面之间切换就比较适合用 v-if。

配合动画使用

Vue 提供了 transition 的封装组件，可以给使用 v-show 和 v-if 的元素添加过渡动画。

使用方法

<template>
  <div id="app">
    <button type="button" @click="show = !show">显示/隐藏</button>
    <transition name="fade">
      <div class="box" v-show="show"></div>
    </transition>
  </div>
</template>
export default {
  name: 'app',
  data () {
    return {
      show: true
    }
  }
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

要使用过渡动画的元素需要写在 transition 内。

效果如下：

vue过渡动画

Vue 使用的是 CSS3 的 transition 动画。

更多关于过渡动画的说明可以查看 官网的说明 。

相关文章：