vue

html:

<div id="app">
    <div class="box">
        <div class="left">
            <p @click="toggleOne" v-if="showOne">隱藏</p>
            <p @click="toggleOne" v-else>顯示</p>            
        </div>
        <div class="right">
            <div class="content" v-show="showOne">內(nèi)容一</div>
        </div>
    </div>
    <div class="box">
        <div class="left">
            <p @click="toggleTwo" v-show="showTwo">隱藏</p>
            <p @click="toggleTwo" v-show="showTwo==false">顯示</p>            
        </div>
        <div class="right">
            <div class="content" v-show="showTwo">內(nèi)容二</div>
        </div>
    </div>
    <div class="box">
        <div class="left">
            <p @click="toggleThree">{{toggleThreeText}}</p>           
        </div>
        <div class="right">
            <div class="content" v-show="showThree">內(nèi)容三</div>
        </div>
    </div>
</div>

css:

* {
    padding: 0;
    margin: 0;
}
#app {
    width: 1000px;
    margin: 0 auto;
}
.box {
    height: 100px;
    margin: 10px 0;
}
.left {
    float: left;
    width: 10%;
    height: 100px;
    background-color: #333;
    cursor: pointer;
}
.right {
    float: right;
    width: 90%;
    height: 100px;
    background-color: #ccc;
}
.left p {
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #eee;
}
.right .content {
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color:salmon;
}

js:

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            showOne: true,
            showTwo: true,
            showThree: true,
            toggleThreeText: '隱藏'
        },
        methods:{
            toggleOne: function () {
                this.showOne = !this.showOne;
            },
            toggleTwo: function () {
                this.showTwo = !this.showTwo;
            },
            toggleThree: function () {
                if (this.toggleThreeText === '隱藏') {
                    this.toggleThreeText = '顯示'
                } else {
                    this.toggleThreeText = '隱藏'
                }
                this.showThree = !this.showThree;
            }
        }
    })
</script>

總結(jié)

設(shè)計(jì)到顯示和隱藏的問題，都可以通過一個(gè)開關(guān)變量來控制切換。

網(wǎng)站導(dǎo)航

網(wǎng)站導(dǎo)航