持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

前言:指令是带有v-前缀的特殊属性，其值限定为单个表达式。指令的作用是，当表达式得值发现变化，将其产生的连带影响应用到DOM上

指令

v-show

v-show指令根据表达式值的真假来显示或隐藏HTML元素。

代码如下：

<template>
  <div id="app">
    <h1 v-show="yes">yes</h1>
    <h1 v-show="no">yes</h1>
    <h1 v-show="age>=20">age:{{age}}</h1>
    <h1 v-show="name.indexOf('gk')">name:{{name}}</h1>
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      yes: true,
      no: false,
      age: 22,
      name: 'h gk',
    }
  }
}
</script>

执行效果图

这边可以看到no属性为false ，所以v-show指令计算no表达式的<h1>元素没有显示。

注意：使用v-show指令元素本身是要被渲染出来的，通过css样式属性display来控制是否显示，如果表达式的值为false，display的值为none。

调出开发者工具可以发现<h1>no</h1>这个元素是被css元素display：none隐藏起来的

v-if/v-else-if/v-else

v-if、v-else-if、v-else这三个指令是用于实现条件判断

v-if

v-if指令根据表达式值的真假来生成或删除一个元素。

代码演示：

<template>
  <div id="app">
    <h1 v-if="yes">yes</h1>
    <h1 v-if="no">no</h1>
    <h1 v-if="age>=20">age:{{age}}</h1>
    <h1 v-if="name.indexOf('gk')">name:{{name}}</h1>

    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      yes: true,
      no: false,
      age: 22,
      name: 'h gk'
    }
  }
}
</script>

效果图

调出开发者工具可以发现<h1>no</h1>这个元素并没有生成，其他表达式值为true的<h1>元素正常生成了

注意：v-if指令跟v-show指令不同，当表达式的值为false时v-if指令不会创建该元素，只有表达式值为true时v-if指令才会真正创建该元素。v-show不管表达式的值是真是假元素本身都会被创建出来的，显示或隐藏是通过css样式属性display来控制的

v-else-if/v-else

v-else-if、v-else指令是和v-if一起使用的，可以实现条件判断

代码演示：

<template>
  <div id="app">
  成绩：
    <span v-if="score>=85">优秀</span>
    <span v-else-if="score>=75">良好</span>
    <span v-else-if="score>=60">及格</span>
    <span v-else>不及格</span>

    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      score: 90
    }
  }
}
</script>

效果图

注意：当一个条件满足时后面的条件都不会再判断。

使用时v-else-if和v-else要在v-if之后