条件渲染指令v-if

最新推荐文章于 2023-09-04 17:27:54 发布

Chen_Wei_Sheng

最新推荐文章于 2023-09-04 17:27:54 发布

阅读量118

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Chen_Wei_Sheng/article/details/126939654

版权

一.v-if的使用

<body>
    <!-- 多分支使用 -->
    <div id="app">
        <h3>当money足够时</h3>
        <div v-if="money >= 10000">去旅游</div> 
        <div v-else-if="money >= 5000">大吃一顿</div>
        <div v-else-if="money >= 1000">网上购物</div>
        <div v-else-if="money >= 100">去超市</div>
        <div v-else>去挣money</div>
    </div>
    <!-- 双分支使用 -->
    <div v-if="age >=18">去</div>
    <div v-else>不去</div>
    
    <script src="./vue.js"></script>
    <script>
        new Vue ({
            el:'#app',
            data:{
                money:10000,
                age:19
            }
        })
    </script>
</body>

二.v-if与v-show的区别

<body>
    <!-- v-show和v-if都可以用来控制标签的显示与隐藏
    <标签 v-show='布尔值'></标签>
    <标签 v-if='布尔值'></标签>
    当布尔值为true，他们就显示;当布尔值为false,他们就隐藏。
 -->
    <div id="app">
        <div v-show ="display">我是由v-show控制的 </div>
        <div v-if="disaplay">我是由v-if控制的 </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue ({
            el:'#app',
            data:{
                display:true
            }
        })
    </script>
    <!--
    【v-show】
    1.本质就是标签display设置为none,控制隐藏。只是基于css进行切换。
    2.v-show有更高的初始渲染消耗。
    3.v-show适合频繁切换的情况。
    【v-if】
    1.动态的向DOM树内添加或者删除DOM元素。
    2.v-if有更高的切换消耗。
    3.v-if适合运行条件很少改变的情况。 -->
    <!--
    v-if	v-show	都能控制 dom 元素在页面的显示	
    v-if 相比 v-show 开销更大的(直接操作dom 节点增加与删除)
    如果需要非常频繁地切换，则使用 v-show 较好
    如果在运行时条件很少改变，则使用 v-if 较好 -->
</body>