如果看的乱去掉注释就一目了然了
<template>
<view class="page">
<view class="content flex" >
<!-- 左边 -->
<view class="left" >
<!-- @click="list()" 标签设置点击事件 -->
<view class="left_title" @click="list()">
左边标题
</view>
<!-- v-if="type == 'A' " 标签摄者是隐藏的意思 若想显示 data里面等于这个A值即可 -->
<view class="left_txt" v-if="type == 'A' ">
这是上面内容
</view>
</view>
<!-- 右边 -->
<view class="right" >
<view class="right_title" @click="list()">
右边标题
</view>
<view class="right_txt" v-if="type == 'B' ">
这是上面内容
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
type:'A'
}
},
methods:{
list(){
if(this.type == 'A'){ // 假如 左边等于 右边 == 代表等于
this.type = 'B' // 左边 赋值 给右边 = 代表赋值 这里面可以这样理解 如果赋值是这个 this.type = 'A' 那么点击一直是这个就会不显示 所以是相反的那个
} else {
this.type = 'A'
}
}
}
}
</script>
<style lang="scss" scoped>
.page{
width: 100%;
.content{
width: 100%;
height: 300rpx;
background-color: #999999;
display: flex;
flex-direction: row;
justify-content: space-between;
.left{
width: 50%;
height: 100%;
background-color: #CC6699;
border: 1rpx solid black;
.left_title{
width: 100%;
height: 20%;
background-color: #FF9900;
text-align: center;
border-bottom: 1rpx solid black;
}
}
.right{
width: 50%;
height: 100%;
background-color: #33FFCC;
border: 1rpx solid black;
.right_title{
width: 100%;
height: 20%;
background-color: #FF9900;
text-align: center;
border-bottom: 1rpx solid black;
}
}
}
}
</style>