Vue常用指令v-if与v-show的区别浅析

介绍

Vue.js是目前最火爆的前端框架之一，而指令是Vue.js中比较重要的一部分。在Vue.js的指令中，v-if和v-show是两个非常常用和容易混淆的指令，它们都是用来控制元素的展示和隐藏，那么v-if和v-show有什么区别呢？

区别

v-if

v-if是一个条件判断指令，当条件表达式为真时，才会展示元素。如果条件表达式为假，则不会渲染元素到页面中。在条件表达式为假时，元素并没有被渲染到页面上，也没有占用DOM空间，因此v-if指令适用于不经常展示的元素。例如：

<div v-if="isLogin">登录成功</div>
<div v-if="!isLogin">登录失败</div>

v-show

v-show也是一个条件判断指令，当条件表达式为真时，元素会显示出来，如果条件表达式为假，则元素会隐藏。但不同的是，v-show指令在条件表达式为假时，元素的display属性被设置为none，因此元素仍然被渲染到了页面上，仅仅是不可见。因此，v-show指令适用于经常需要切换的元素，例如：

<div v-show="isShow">这是一个显示和隐藏的元素</div>
<button @click="isShow = !isShow">点击切换</button>

示例

示例一

有一个需求，需要实现一个点击按钮可以切换登录和退出登录的状态，并且切换状态时需要有不同的提示。

代码示例：

<template>
  <div>
    <button @click="isLogin = !isLogin">{{ isLogin ? '退出登录' : '登录' }}</button>
    <div v-if="isLogin">您已登录</div>
    <div v-if="!isLogin">请登录</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLogin: false
    }
  }
}
</script>

上面的代码中，我们使用v-if指令来根据isLogin的值来展示不同的提示信息。

示例二

在一个表格中，需要根据不同的数据展示不同的元素，当数据为空时，需要显示一个提示信息。

代码示例：

<template>
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td v-if="item.isMale">男</td>
        <td v-else>女</td>
      </tr>
    </tbody>
  </table>
  <div v-if="list.length === 0">暂无数据</div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { id: 1, name: '小明', age: 18, isMale: true },
        { id: 2, name: '小红', age: 20, isMale: false },
        { id: 3, name: '小刚', age: 22, isMale: true }
      ]
    }
  }
}
</script>

上面的代码中，我们使用v-if指令来判断数据列表是否为空，并展示相应的提示信息；使用v-if和v-else指令来根据不同的数据展示不同的元素。