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

Posted 2022-01-26 傻狍子学前端

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;

---