点击标题标签切换显示对应内容

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
分享
二维码
< <上一篇
下一篇>>