为啥实现不了两个盒子之间的隐藏，类似于top栏切换效果

小黄练编程 · 发表于 2022-6-12 22:52:13

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        ul{
            width:400px;
            height:100px;
            background-color:red;
            display:flex;
        }
        ul li{
            width:150px;
            height:100px;
            margin-left:20px;
            background-color:green;
            text-align:center;
            line-height:100px;
        }
        .box1{
            width:400px;
            height:400px;
            background-color:blue;
            display:none;

        }
        .box2{
            width:400px;
            height:400px;
            background-color:gray;
            display:none;
        }
    </style>
</head>
<body>
    <div id="root">
        <ul>
            <li @click="change1()">1</li>
            <li @click="change2()">2</li>
        </ul>
        <div class="box1" v-show="a">1</div>
        <div class="box2" v-show="b">2</div>
    </div>
    <script>
    const vm=    new Vue({
            el:'#root',
            data:{
                a:'false',
                b:'false',
            },
          methods:{
            change1(){
                this.a='true',
                this.b='false',
                alert('11');
              console.log(this.a)

            },
            change2(){
              this.b='true',
              this.a='false',
              alert('22');
              console.log(this.b)

            },

          }
        })
    </script>
</body>
</html>

全幼儿园最帅 · 发表于 2022-6-30 17:27:10

修改后的代码：

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        ul {
            width: 400px;
            height: 100px;
            background-color: red;
            display: flex;
        }

        ul li {
            width: 150px;
            height: 100px;
            margin-left: 20px;
            background-color: green;
            text-align: center;
            line-height: 100px;
        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: blue;
            /* display:none; 不需要，是通过v-show决定是否要显示的*/

        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: gray;
            /* display:none; */
        }
    </style>
</head>

<body>
    <div id="root">
        <ul>
            <li @click="change1()">1</li>
            <li @click="change2()">2</li>
        </ul>
        <div class="box1" v-show="a">1</div>
        <div class="box2" v-show="b">2</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                // a:'false',
                // b:'false',
                // 去掉true和false外面的引号
                a: false,
                b: false,
            },
            methods: {
                change1() {
                    // this.a='true',
                    // this.b='false',
                    // 去掉引号，逗号改成分号或者不要符号
                    this.a = true;
                    this.b = false;
                    alert('11');
                    console.log(this.a)

                },
                change2() {
                    //   this.b='true',
                    //   this.a='false',
                    this.b = true;
                    this.a = false;
                    alert('22');
                    console.log(this.b)

                },

            }
        })
    </script>
</body>

</html>

账号		自动登录	找回密码
密码			立即注册