Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)

条件渲染

顾名思义,就是符合哪些条件,就渲染哪些东西,其实就是几个指令的使用
先做一个小例子

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第1张图片

我想让这个div时而显示,时而隐藏,可以在两者之间进行切换,那么使用原生的方式实现,想到的是用display控制。在vue中不用亲自的写这个属性,它提供了一个执行:v-show

v-show

v-show是vue给我们提供的指令,控制元素是否展示,值通常为布尔值(也可以写表达式),为false的时候隐藏,为true的时候显示,默认为true

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第2张图片

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第3张图片

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第4张图片

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第5张图片

v-show不仅仅可以写布尔值,也可以写表达式,根据表达式的结果判断是true还是false

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第6张图片

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第7张图片

上面两个都是false,所以也一定不会显示

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第8张图片

v-show的底层实现其实是调整的是display的属性

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第9张图片

说到v-show就不得不说下v-if了

v-if

我们把v-show换成v-if,发现元素也没了,而且没得很彻底,不止是被隐藏了,根本就找不到了
如果确定了这个元素不想显示,那么可以使用v-if

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第10张图片

元素直接没了

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第11张图片

当然v-if也可以支持表达式

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第12张图片

v-show和v-if整合小案例

如果v-show和v-if都已经掌握了,就可以做一个交互的小案例了
这个案例内容为:定义一个初始化为0的属性n,通过按钮每次自增1,n=1的时候展示一个div,n=2的时候再展示一个div

v-show实现

首先使用v-show实现

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第13张图片

效果是完全符合的

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第14张图片

v-if实现

然后使用v-if实现

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第15张图片

也是可以实现的

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第16张图片

v-show和v-if对比

那么既然v-show和v-if都可以是实现,那么用哪个呢?

如果元素有着很高的切换频率,那么建议使用v-show,因为v-show只是控制display的属性,元素节点还在,但是如果v-if切换频率很高,元素节点一直在消失,不断在dom里面添加删除一个节点,存在一定的效率问题,所以切换频率低的建议使用v-if,频率高的建议使用v-show

v-else-if

不仅有v-if,还有v-else-if,写法和js的写法逻辑是一样的,如果第一个表达式成立,就不会判断后面的表达式了,它的效率比v-if高,如果有多个判断,建议使用它

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第17张图片

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第18张图片

v-else

既然都有v-if和v-else-if,怎么少的了v-else呢,当没有表达式满足的时候,会执行它,一般v-else里面不会写表达式,因为写也不会去执行判断

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第19张图片

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第20张图片

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第21张图片

值得注意的是:当我们配合使用这些判断的时候,不允许被打断,如果中间有其他元素,则会打断整体结构的运行

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第22张图片

小技巧

如果我们使用v-show或者v-if判断的时候,有多个相同的条件,那么我们需要写多次相同的判断

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第23张图片

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第24张图片

这样虽然可以实现功能,但是代码有些冗余

技巧1(不推荐)

这种情况下,我们可以给这些元素一个父元素,条件在父容器里面写

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第25张图片

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第26张图片

这样写虽然可以实现,但是有个小小的美中不足,就是破坏了结构,本来只有三个H2元素,现在为了实现功能却要加一个div

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第27张图片

技巧2(推荐)

我们不用div,使用template(模板),它最大的特点就是不影响结构,值得注意的是:template只能配合v-if使用,不能配合v-show使用

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第28张图片

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第29张图片

上面说了,只能配合v-if使用,换成v-show是不行了,我们也来验证下

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第30张图片

n还不等于1就显示出来了,明显不行

Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)_第31张图片

相关代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 使用v-show做条件渲染 -->
    <!-- 
你好,{{name}}
<div id="root" v-show='1==2'> 你好,{{name}}</div> --> <!-- 使用if做条件渲染 --> <!--
你好,{{name}}
-->
<!-- v-if和v-show交互使用小案例 --> <div id="root"> <!-- v-else和v-else-if配合使用 不允许被打断 --> <h2>当前的n的值是{{n}}</h2> <button @click="n++">点我n+1</button> <!--
vue
<div>!!!</div> <div v-else-if="n === 2">html</div> <div v-else-if="n === 3">java</div> <div v-else>mysql</div> --> <!-- template只能配合v-if使用 配合v-show是不行的 --> <template v-if='n===1'> <h2>北京</h2> <h2>青岛</h2> <h2>深圳</h2> </template> </div> </body> <script type="text/javascript"> const vm= new Vue({ el:'#root', data:{ name:'vue', n:0 } }) </script> </html>

总结

条件渲染
1 v-if
写法:
(1) v-if=“表达式”
(2) v-else-if=“表达式”
(3) v-else=“表达式”
适用于:切换频率比较低的场景
特点:不展示dom元素直接移除
注意:v-if可以和v-else-if,v-else一起使用,但是要求结构不能打断
2 v-show
写法:v-show=“表达式”
适用于:切换频率较高的场景
注意:不展示dom元素不会被移,仅仅是控制display的属性进行显示或者隐藏
3 备注
使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到

你可能感兴趣的:(Vue,vue.js,前端,javascript)