条件渲染指令
- 1.
v-if
与v-else
- 2.
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>Vue条件渲染</title>
<link rel="stylesheet" href="indexCss.css">
</head>
<body>
<div id="root">
<h2>欢迎来到{{name}}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="indexJS.js"></script>
</html>
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data(){
return{
name: 'bilibili'
}
}
})
使用v-show进行条件渲染
想要进行一个隐藏显示的切换:
隐藏:
<h2 v-show="false">欢迎来到{{name}}</h2>
显示:
<h2 v-show="true">欢迎来到{{name}}</h2>
你若是自己不想在这写,可以写成:
<h2 v-show="a">欢迎来到{{name}}</h2>
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data(){
return{
name: 'bilibili',
a: false
}
}
})
使用v-if进行条件渲染
<h2 v-if="false">欢迎来到{{name}}</h2>
发现也没有了,而且结构也不在了
如果学会了这俩个就可以做一个简单的交互了
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
Vue.config.productionTip = false
const vm = new Vue({
el: '#root',
data(){
return{
name: 'bilibili',
a: false,
n: 0
}
}
})
要求是: n === 1的时候展示一个div
;
n === 2的时候展示一个div
;
n === 3的时候展示一个div
。
用v-show
写:
<div v-show="n === 1">美食区</div>
<div v-show="n === 2">动画区</div>
<div v-show="n === 3">学习区</div>
这个data
中的数据一旦发生改变,那整个模板被重新解析重新解析来到<div v-show="n === 1">美食区</div>
条件是成立的,下面的div
它会 依然进行判断的
用v-if
写:
<div v-if="n === 1">美食区</div>
<div v-if="n === 2">动画区</div>
<div v-if="n === 3">学习区</div>
如果你的判断有很高的切换频率,建议使用v-show
,因为v-show
只是动态隐藏,节点在,只是动态的控制一下隐藏和显示,通过display:none
有v-if
就有v-else-if
v-else
和v-else-if
<div v-if="n === 1">美食区</div>
<div v-else-if="n === 2">动画区</div>
<div v-else-if="n === 3">学习区</div>
如果<div v-if="n === 1">美食区</div>
成立,之后的俩行代码就不会去看了
怎么知道
<div v-if="n === 1">美食区</div>
<div v-else-if="n === 1">动画区</div>
看看动画区
有没有出现,纵使<div v-else-if="n === 1">动画区</div>
成立,也不会去看了
还有一个指令v-else
<div v-else>生活区</div>
做v-if
、v-else
、v-else
判断,不能被打断
<div v-if="n === 1">
<h2>美食区</h2>
<h2>动画区</h2>
<h2>学习区</h2>
</div>
template和v-if的使用
为了不影响结构,你可以这么写
<template v-if="n === 1">
<h2>美食区</h2>
<h2>动画区</h2>
<h2>学习区</h2>
</template>
template
最大的特点就是不影响结构
你表面写的时候template
对这些h2
进行了一个包裹;
等最终页面渲染的时候它会把<template v-if="n === 1">
的内容给拖掉
但是template
只能配合v-if
配合,不能跟v-show
进行配合
总结
条件渲染
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一定可以获取到