DOM层代码:
<ul class="tab-box">
<li v-for="(title, index) in tabTitle"
:key="index"
@click="onTabElClick(index)"
:class="curIndex === index ? 'active' : ''">
{{ title }}
</li>
</ul>
<div class="tab-content">
<div v-for="(m,index) in tabMain"
v-show="curIndex=== 0">{{m}}</div>
<div v-show="curIndex=== 1">yyy</div>
</div>
CSS代码:
.tab-box {
float: right;
li {
display: inline-block;
width: 82px;
height: 20px;
background: #ffffff;
border: 1px solid #ccc;
font-size: 14px;
font-family: SourceHanSansCN-Regular, SourceHanSansCN;
font-weight: 400;
color: #333333;
line-height: 20px;
text-align: center;
cursor: pointer;
}
.active {
background: #3195f9;
color: #ffffff;
}
}
控制层:
<script>
export default {
data() {
return {
curIndex: '0', // 默认选中第一个tab
tabTitle: ['行政区划', '按流域']
tabMain: ['内容一', '内容二', '内容三', '内容四'],
}
},
components: {},
methods: {
// tab切换
onTabElClick(index) {
this.curIndex = index
},
}
}
</script>
在切换的时候我遇到了一个问题
<div v-for="(m,index) in tabMain"
v-show="curIndex=== 0">{{m}}</div>
<div v-show="curIndex=== 1">yyy</div>
要住意“=”和“”的区别,== 代表相同, =代表严格相同,这么理解: 当进行双等号比较时候: 先检查两个操作数数据类型,如果相同, 则进行=比较, 如果不同, 则愿意为你进行一次类型转换, 转换成相同类型后再进行比较, 而===比较时, 如果类型不同,直接就是false.
我之前写的代码是:
` <div v-for="(m,index) in tabMain"
v-show="curIndex=='0'">{{m}}</div>
<div v-show="curIndex=='1'">yyy</div>`
可以切换
但是当写成
<div v-for="(m,index) in tabMain"
v-show="curIndex=== '0'">{{m}}</div>
<div v-show="curIndex=== '1'">yyy</div>
无法切换,一定要注意