浅谈Vue中的条件渲染
条件渲染是根据表达式真值情况动态选择与之绑定的元素是否在页面显示出来
有v-if和v-show这两种方式来实现动态渲染
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>Document</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 条件渲染 -->
<!-- v-if的使用 -->
<p v-if="4>2">1.为真我就显示</p>
<p v-if="true">2.为真我就显示</p>
<p v-if="flag1">3.为真我就显示</p>
<p v-if="1>2?false:true">4.为真我就显示</p>
<p v-if="1===1">5.为真我就显示</p>
<p v-if="4<2">6.为真我就显示</p>
<p v-if="false">7.为真我就显示</p>
<p v-if="flag2">8.为真我就显示</p>
<p v-if="1<2?false:true">9.为真我就显示</p>
<p v-if="1===2">10.为真我就显示</p>
<!-- 不展示的dom元素直接被移除 -->
</div>
</body>
<script>
new Vue({
el:'#app',
data() {
return {
flag1:true,
flag2:false,
}
},
})
</script>
</html>
效果:
从上可以看出,只有当v-if内表达式的值为真时,与之绑定的元素才会显示到页面中
另外,Vue也支持多条件判断,v-if, v-else-if ,v-else
如:
<!-- 只显示其一 -->
<p v-if="false">A1</p>
<p v-else>B1</p>
<!-- 连续判断 -->
<p v-if="false">A2</p>
<p v-else-if="false">B2</p>
<p v-else>C2</p>
效果:
v-show
根据表达式的真假值,切换元素的display属性值,当条件变化时,该指令触发过渡效果。
举例:
<p v-show="true">标题一</p>
<p v-show="false">标题二</p>
<p v-show="true">标题三</p>
效果:
从上面效果可以看出,使用v-show实现条件渲染,dom元素还是存在页面的,只是隐藏了没有显示出来
总结:
- v-if:
- 适用于:切换频率较低的场景
- 特点:不展示的dom元素直接被移除
- 注意:v-if可以和:v-else-if,v-else一起使用,但要求结构不能被“打断”即v-if与v-else所在语句必须连续
- v-show:
- 适用于:切换频率较高的场景
- 特点:不展示的dom元素未被移除,只是使用样式隐藏