VUE的条件选可以使用v-show或者v-if、v-else-if、 "true/false"来实现。
v-show的用法如下:
v-show = “true(表达式)”:表示可见
v-show = “true(表达式)”:表示不可见,一旦在某个元素这样设置,那么这个元素就会从我们视觉里消失,但是他的元素节点的结构依然存在。
v-if、v-else-if、v-else:
v-if = “true/false(表达式)”、v-else-if = “true/false(表达式)”、 v-else后面不用表达式。
前面两个为true的时候,表示可见,为false的时候表示不可见,会将对应的元素结构移除。这三个的关系就跟Java里面if、else if 、else一样,用法也一样,其理解也是差不多的。v-if为真的就执行if里面的,如果v-else-if的条件为真那么就执行这里面的,前面两个都为false的话,那么就使用else的
现在我们可以来看下上面两种方式的区别;
v-if、v-else-if、v-else:
写法:(1).v-if=“表达式”
(2).v-else-if=“表达式”
(3).v-else=“表达式”
这种使用的方式适用于使用频率较低的场景,主要是这种对元素节点结构产生·破坏,不展示的DOM元素直接被移除。这种方式有一点是要非常注意的,那就是v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。
.v-show
写法:v-show=“表达式”
这种方式切换频率较高的场景,这种方式不展示的DOM元素未被移除,仅仅是使用样式隐藏掉,后面我们需要隐藏的节点的时候,我们可以获取到。使用v-if的时,元素可能无法获取到,但是使用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>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<style>
h3 {
background-color: rgb(170, 71, 104);
}
</style>
</head>
<body>
<div id="demo">
<!--v-show只是隐藏视觉效果,但是结构还在-->
<h1 v-show="tf">v-show的条件渲染</h1>
<button @click="funTturOrFalse">显示or隐藏</button>
<!--v-if不仅仅是隐藏视觉效果,但是结构也没有了-->
<!--<h1 v-if = "false">v-if的条件渲染</h1>-->
<div style="width: 100%;height:2px;background-color: blue;"></div>
<h1>我们可以考虑这样一个场景就是,通过按钮来控制div的出现和消失</h1>
<h2>第一种情况(v-else-if、v-else一起使用,但要求结构不能被“打断”):</h2>
<button @click="num++">按钮1</button>
<h3>当前的num的值是{{num}}</h3>
<h3 v-if="num===1">希望全世界的新冠疫情可以结束。</h3>
<h3 v-else-if="num===2">希望中国新冠疫情可以结束。</h3>
<h3 v-else-if="num===3">希望武汉、成都等城市的疫情可以结束。</h3>
<h3 v-else>希望全国、全世界的人们可以和平相处,共同建设我们美好的地球村!</h3>
<h2>第二种情况(v-else-if、v-else一起使用,但要求结构不能被“打断”):</h2>
<!-- v-if与template的配合使用 -->
<button @click="num1++">按钮2</button>
<h3>当前的num的值是{{num1}}</h3>
<!--当怒骂1为偶数的时候,就使元素节点消失-->
<template v-if="num1%2 === 0">
<h2>地球</h2>
<h2>亚洲</h2>
<h2>中国</h2>
<h2>北京、上海、广州、深圳、武汉、成都、杭州......</h2>
</template>
</div>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el: '#demo',
data: {
tf: true,
num: 0,
num1:0
},
methods: {
funTturOrFalse() {
return this.tf = !this.tf;
}
},
})
</script>
</body>
</html>