点击标题标签切换显示对应内容
Vue点击标题标签切换显示对应内容
html
<div class=" ">
<div class=" ">
<ul class=" ">
<li :class=" reqinx == 0 ? 'active' : '' " @click="reqTagle(0)">星期一</li>
<li :class=" reqinx == 1 ? 'active' : '' " @click="reqTagle(1)">星期二</li>
<li :class=" reqinx == 2 ? 'active' : '' " @click="reqTagle(2)">星期三</li>
<li :class=" reqinx == 3 ? 'active' : '' " @click="reqTagle(3)">星期四</li>
<li :class=" reqinx == 4 ? 'active' : '' " @click="reqTagle(4)">星期五</li>
</ul>
<ul class=" " v-if="reqinx == 0">
星期一的内容
</ul>
<ul class=" " v-if="reqinx == 1">
星期二的内容
</ul>
<ul class=" " v-if="reqinx == 2">
星期三的内容
</ul>
<ul class=" " v-if="reqinx == 3">
星期四的内容
</ul>
<ul class=" " v-if="reqinx == 4">
星期五的内容
</ul>
</div>
</div>
javascript
export default {
methods: {
reqTagle(index) {
this.reqinx = index;
}
}
}
css
.active {
color: #6C6EFF !important;
border-bottom: 2px solid #6C6EFF !important;
}
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
二维码