VUE条件渲染

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

相关阅读:
在linux下使用ffmpeg方法
 HBase导出建表语句
 BUUCTF reverse wp 56 - 60
【USRP】软件无线电基础篇：长波、中波、短波
 利用EXCEL中的VBA对同一文件夹下的多个数据文件进行特定提取
 Java零基础入门-大数
 Hadoop 集群搭建（docker版本）
java中volatile解决可见性和有序性问题
 【n子棋】
JavaScript 日常开发的 9 个实用代码片段（part 1）
原文地址：https://blog.csdn.net/weixin_43228946/article/details/126674989