切換顯示和隱藏

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)航

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容