vue学习：v-if、v-show、v-else和v-else-if

最新推荐文章于 2024-04-09 17:07:08 发布

每天学一点.

最新推荐文章于 2024-04-09 17:07:08 发布

阅读量438

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/daokoi/article/details/123685219

版权

vue学习：v-if、v-show、v-else和v-else-if

v-if: 条件判断，当得到结果为true时，所在的元素才会被渲染。
v-show：当得到结果为true时，所在的元素才会被显示。

<div id="app">
    <!-- 
        v-if: 条件判断，当得到结果为true时，所在的元素才会被渲染。
        v-show：当得到结果为true时，所在的元素才会被显示
    -->
    <button @click="show = !show">点我呀</button>
    <h1 v-if="show">v-if.....</h1>
    <h1 v-show="show">v-show.....</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            show:true
        }
    });
</script>

页面展示：
在这里插入图片描述
点击按钮后：

v-else和v-else-if：

 <div id="app">
   	 <button @click="random=Math.random()">点我呀</button>
     <span>{{random}}</span>
     <h1 v-if="random >= 0.75">
         看到我啦？！ &gt;=0.75
     </h1>
     <h1 v-else-if="random >= 0.5">
         看到我啦？！ &gt;=0.5
     </h1>
     <h1 v-else-if="random >= 0.2">
         看到我啦？！ &gt;=0.2
     </h1>
     <h1 v-else>
         看到我啦？！ &lt;=0.2
     </h1>
 </div>
 <script src="../node_modules/vue/dist/vue.js"></script>
 <script>
     new Vue({
         el: '#app',
         data:{
             random:1
         }
     });
 </script>