问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

关于vue选项卡点击添加class的问题?

头像
xiaodi
    5131214

    在标签页1下点击aa,aa会添加class，但同时2和3标签页下的cc和ee也会添加class,如何在1页面下点击aa只有1页面的aa添加class，就是不会互相干扰？
    图片描述

    图片描述

    <body>
    <div id="app">
        <div style="display: flex;">
            <div class="tab-name" v-for="(item,index) in list" :class="{selected:index == tabIndex}" @click="tabNameClick(index)">{{item.name}}</div>
        </div>
        <div style="display: flex;">
            <div class="tab-content" v-for="(item,index) in list" v-show="index == tabIndex">
                <div class="tab-item" v-for="(x,index) in item.content" :class="{selected:index == itemIndex}" @click="tabItemClick(index)">{{x}}</div>
            </div>
        </div>
    </div>
    <script>
        var content = [
            {name:'1',content:['aa','bb']},
            {name:'2',content:['cc','dd']},
            {name:'3',content:['ee','ff']}
        ]
        new Vue({
            el: '#app',
            data: {
                list: content,
                tabIndex:0,
                itemIndex:null
            },
            methods: {
                tabNameClick: function(index){
                    this.tabIndex = index;
                },
                tabItemClick: function(index){
                    this.itemIndex = index;
                }
            }
        })
    </script>
</body>
    javascriptvue.jshtmlcss
    阅读 9.3k
    1 个回答
    得票最新
    头像
    KingMario
      7.2k31429
      ✓ 已被采纳

      选择 tab 下面的块时，不要存放到同一个实例数据，而是用一个对象来记录：

      <div class="tab-content" v-for="(item, contentIndex) in list" v-show="contentIndex === tabIndex">
  <div class="tab-item" v-for="(x,index) in item.content" :class="{selected: selectedBlock[contentIndex] === index}" @click="tabItemClick(index)">{{x}}</div>
</div>
      new Vue({
  el: '#app',
  data: {
    list: content,
    tabIndex: 0,
    selectedBlock: {}
  },
  methods: {
    tabNameClick: function(index) {
      this.tabIndex = index;
    },
    tabItemClick: function(index) {
      this.$set(this.selectedBlock, this.tabIndex, index)
    }
  }
})

      在线演示：https://jsfiddle.net/KingMari...

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题