v-show的作用—根据表达式的布尔值切换元素的显示与隐藏

代码示例

<!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-show的作用——根据表达式的布尔值切换元素的显示与隐藏</title>
</head>
<body>
    <!-- v-show常用于广告的显示与隐藏、遮罩层的显示与隐藏等,本质是修改元素的display属性 -->
    <div id="app">
        <div style="width: 100px; height: 200px; background-color: green" v-show="isShow"></div>
        <button @click="changeIsShow">切换显示状态</button>
        <!-- v-show后也可直接加布尔值表达式,如age>18 -->
        <div style="width: 100px; height: 200px; background-color: yellow" v-show="age>18"></div>
        <button @click="decAge">减少年龄</button>
        <button @click="incAge">增加年龄</button>
    </div>
    <script src="/vue/node_modules/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:false,
                age: 18
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                },
                decAge:function(){
                    this.age--;
                },
                incAge:function(){
                    this.age++;
                }
            }
        });
    </script>
</body>
</html>
上一篇:vue for循环出来的数据变成折叠面板


下一篇:layui switch监听事件