目录
1.使用v-show做条件渲染
2.使用v-if做条件渲染
3.小案例
4.v-else和v-else-if
5.v-if与template的配合使用
6.总结
在这一节当中,我们来讲一下Vue中的条件渲染,顾名思义,意思就是,你符合某些条件,我再去给你渲染某些东西。
1.使用v-show做条件渲染
需求:需要实现标签显示和隐藏状态的切换
这个需求如果使用原生去实现的话,可以通过display属性来实现。那么在Vue中,我们不需要亲自去写这些属性,它给你提供了一个指令v-show,我们可以通过它来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2 v-show="false">欢迎学习{{name}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'Vue'
},
methods: {
},
})
</script>
</html>
实现效果:
我们可以看到v-show的本质还是在控制display属性,而且原来的html结构并没有消失,只是被隐藏掉了而已。
而且我们还可以通过变量来动态的控制显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2 v-show="show">欢迎学习{{name}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue',
show:false
},
methods: {
},
})
</script>
</html>
实现效果:
其实上面的v-show不仅可以赋值true或false,而且还可以使用表达式来实现同样的效果:
<h2 v-show="1 === 1">欢迎学习{{name}}</h2>
2.使用v-if做条件渲染
上面我们讲了v-show可以实现显示和隐藏,那么v-if也可以实现同样的效果,只不过v-if隐藏的更彻底,直接连html结构也没了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<h2 v-if="false">欢迎学习{{name}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue',
show:false
},
methods: {
},
})
</script>
</html>
实现效果:
同样的上面的v-if不仅可以赋值true或false,而且也可以使用表达式来实现同样的效果
<h2 v-if="1 === 1">欢迎学习{{name}}</h2>
3.小案例
刚刚我们已经学完了v-show和v-if的用法,接下来我们就可以用它来实现一个简单的交互。
有一个数值n初始值是0,有一个按钮,每次点击,n就会加1,要求是n等于1,2,3时各自展示对应的div。
实现原理是,data中的数据一旦发生改变,那么整个模板就会被重新解析,从而根据现在的值实现不同的渲染。
v-show实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>当前的n值是: {{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
<div v-show="n === 1">Angular</div>
<div v-show="n === 2">React</div>
<div v-show="n === 3">Vue</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue',
show:false,
n:0
},
methods: {
},
})
</script>
</html>
实现效果:
v-if实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>当前的n值是: {{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
<div v-if="n === 1">Angular</div>
<div v-if="n === 2">React</div>
<div v-if="n === 3">Vue</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue',
show:false,
n:0
},
methods: {
},
})
</script>
</html>
实现效果:
我们可以看到使用v-show和v-if的实现效果是一样的,这个时候就会有人问,既然实现效果都一样,那我们应该用哪个呢?
如果这个东西有很高的切换频率,变化的很频繁,那么就建议使用v-show,因为v-show的节点还在,它只是动态的控制一下隐藏和显示。
而v-if,如果变化频率很高,它不断的对dom进行操作,就会存在一定的效率问题。
4.v-else和v-else-if
我们都用过if ,else if,那么同样的v-if 也会对应v-else-if,那么刚才的那个案例我们就可以这样去写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>当前的n值是: {{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue',
show:false,
n:0
},
methods: {
},
})
</script>
</html>
实现效果:
都用v-if和或者使用v-if,v-else-if虽然都可以实现同样的效果,但是都用if的话,所有条件都会进行判断,如果用if,else if的话,只要其中一个条件符合,那么其他的条件就不会再判断了,效率就会高点。
那么说完了 if 和else if,接下来就该说else了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>当前的n值是: {{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue',
show:false,
n:0
},
methods: {
},
})
</script>
</html>
实现效果:
我们可以看到,除了1,2,3之外别的都会显示else对应的哈哈 。
这里我们需要注意一点,如果我们使用v-if,v-else-if,v-else,配合使用的话,这些结构之间必须紧紧的挨在一块,不允许被打断。
我们可以实验一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>当前的n值是: {{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div>@@@</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue',
show:false,
n:0
},
methods: {
},
})
</script>
</html>
实现效果:
我们可以看到打断之前的判断是好使的,而打断后面的内容就不奏效了。
这是因为被打断后面的部分没有合适的匹配造成的。
5.v-if与template的配合使用
接下来我们再说一个需求:我们有3个h2标签,都是当n等于1的时候进行展示,请问该怎么写?
这时有人就会说可以这么写,给这3个h2标签都加上if。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>当前的n值是: {{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
<!-- <div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div>@@@</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div> -->
<h2 v-if="n == 1">你好</h2>
<h2 v-if="n == 1">哈喽</h2>
<h2 v-if="n == 1">Vue</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue',
show:false,
n:0
},
methods: {
},
})
</script>
</html>
实现效果:
这个时候我们就会发现这些条件判断都是一样的,但我们却要重复的去写3次,那么有没有更简单的办法呢?
这个时候又有人会说,那我们在这3个h2的外部包裹一个div,然后只在div上写一个if判断就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>当前的n值是: {{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
<!-- <div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div>@@@</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div> -->
<div v-if="n === 1">
<h2>你好</h2>
<h2>哈喽</h2>
<h2>Vue</h2>
</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue',
show:false,
n:0
},
methods: {
},
})
</script>
</html>
实现效果:
我们可以看到,同样可以实现效果,但是这样写有一点小小的美中不足,因为我们破坏了原有的结构。虽然这种对结构的影响,可以通过样式控制消化掉。
那么这个时候,我们就有一种更好的选择,就是将外部的div替换为template模板,template最大的一个特点就是不影响结构。虽然我们使用template对h2进行了包裹,但是等最终渲染结束之后会将外部的template结构脱掉。我们可以试一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
</style>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>当前的n值是: {{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show做条件渲染 -->
<!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
<!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
<!-- 使用v-if做条件渲染 -->
<!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
<!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
<!-- <div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div>@@@</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div> -->
<template v-if="n === 1">
<h2>你好</h2>
<h2>哈喽</h2>
<h2>Vue</h2>
</template>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
const vm = new Vue({
el:'#root',
data:{
name:'Vue',
show:false,
n:0
},
methods: {
},
})
</script>
</html>
实现效果:
我们可以看到使用template包裹的原有结构并没有被破坏掉。
但是这里需要注意的一点是:template只能和v-if配合使用,不能和v-show配合使用
6.总结
条件渲染:
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元素未被移除,仅仅是使用样式隐藏掉
3.备注:使用v-if的时候,元素可能无法获取到,而使用v-show一定可以获取到。