【vue学习】3.本地应用——显示切换，属性绑定_vue3根据id设置组件是否显示-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41908867/article/details/108647662

本地应用——显示切换，属性绑定

v-show

作用: 根据表达式的真假切换元素的显示状态，原理修改元素的display，实现显示隐藏

<body>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <div id="app">
            <span v-show="isShow">{{message}}</span>
            <span v-show="age>18">age>18</span>
            <span v-show="age<18">age<18</span>
            <button @click="changeIsShow">changeIsShow</button>
        </div>

        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:"显示我吧！",
                    age: 16,
                    isShow:false
                },
                methods:{
                    changeIsShow:function(){
                        this.isShow = !this.isShow;
                    }
                }

            })
        </script>
</body>

v-if

作用：根据表达式真假切换元素显示状态

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <p v-if="isShow">你好呀</p>
        <button @click="toggleIsShow">change</button>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

注意: v-show是通过操作样式是否隐藏，v-if是通过操作DOM决定是否隐藏

v-bind

作用: 设置元素的属性

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <img v-bind:src="imgSrc" alt="" >
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'acitve':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{acitve:isActive}" @click="toggleActive">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
                imgTitle:"百度图片",
                isActive: false
            },
            methods:{
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>

v-bind: 可以简写：
可以使用三元表达式，推荐使用对象方式。