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)變量來控制切換。