动态条件渲染：v-if与v-show比较-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_66059613/article/details/128067937

v-if

动态的向DOM树内添加或者删除DOM元素

v-if有更高的切换消耗

v-if适合运行条件很少改变的情况

v-if的使用

<!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>Document</title>
</head>

<body>
    <div id="app">
        <!-- 多分支使用v-if -->
        <h3>根据自身财富值决定</h3>
        <div v-if="money >= 100000000">酒池肉林</div>
        <div v-else-if="money >=50000000">醉生梦死</div>
        <div v-else-if="money >=1000000">半生浪荡</div>
        <div v-else-if="money >=100000">走路带风</div>
        <div v-else>安心做人</div>
        <!-- 双分支使用v-if -->
        <hr>
        <div v-if="age > 18">成年了,没有防沉迷</div>
        <div v-else>未成年,啥也不是</div>
    </div>
    <script src="../vue.js">

    </script>
    <script>
        new Vue({
            el: '#app',
            data: {
                money: 1000000,
                age: 19
            }
        })
    </script>
</body>

</html>

v-show

本质就是标签display设置为none ，控制隐藏，只是基于CSS进行切换

v-show有更高的初始渲染销耗

v-show适合频繁切换的情况

v-show的使用：根据切换元素的显示状态 .原理是修改元素的display，实现显示隐藏。
指令后面的内容，最终都会解析为布尔值，值为true元素显示，值为false元素隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show</title>
</head>
<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow"><!--这里的@还记得吗？  是v-on 的缩写-->
        <input type="button" value="累加年龄" @click="addAge">
        <!-- 这里通过v-show控制图片的显示与否 -->
        <image v-show="isShow" src="u=493687242,3723125905&fm=26&gp=0.jpg"></image>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:({
                isShow:false,
                age:17
            }),
            methods:{
                changeIsShow:function(){
                    this.isShow=!this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            },
        })

    </script>
</body>
</html>