前言:指令是带有 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 之后
