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

傻狍子学前端

于 2021-12-31 16:59:27 发布

阅读量1k

点赞数 4

分类专栏：笔记 Vue 文章标签： javascript vue.js css html 前端

本文链接：https://blog.youkuaiyun.com/TOP1999LHF/article/details/122259680

版权

笔记同时被 2 个专栏收录

17 篇文章

订阅专栏

Vue

7 篇文章

订阅专栏

本文介绍如何使用Vue.js实现点击标题标签来切换显示对应的内容，主要涉及Vue的基础知识和CSS样式控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}