vue 指令 -1

作者：小恺

2022 年 6 月 05 日
本文字数：1099 字
阅读完需：约 4 分钟

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

发布于: 刚刚阅读数: 3

小恺

关注

还未添加个人签名 2021.02.22 加入

还未添加个人简介

发布

暂无评论

创作场景

vue 指令 -1

指令

v-show

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

v-if

v-else-if/v-else

小恺

评论