v-if的作用—根据表达式的布尔值切换元素的显示与隐藏（操作dom）

2024-03-24 14:32:40
代码示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-if的作用——根据表达式的布尔值切换元素的显示与隐藏</title>
</head>
<body>
    <!-- v-if的作用与v-show相同，都是根据表达式的布尔值切换元素的显示与隐藏，但v-if是通过增删dom元素的方式实现元素的隐藏和显示 -->
    <div id="app">
        <p v-if="isShow">
            评论.............................
            .................................
            <br>
            吐槽.............................
            .................................
        </p>
        <!-- v-if后也可直接加布尔值表达式，如age>18 -->
        <button @click="hideOrDisplay">{{message}}</button>
    </div>
    <script src="/vue/node_modules/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                message:"显示评论和吐槽"
            },
            methods:{
                hideOrDisplay:function(){
                    if(this.isShow){
                        this.isShow=false;
                        this.message="显示评论和吐槽"
                    }
                    else{
                        this.isShow=true;
                        this.message="隐藏评论和吐槽"
                    }
                }
            }
        });
    </script>
</body>
</html>
码农公寓
