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>

你可能感兴趣的:(vue.js,javascript,前端)