vue.js - 二级列表，怎么给子列表添加class

问题描述

问 题

1.点击一级菜单展开二级列表，然后点击子列表添加class，现在点击添加两个list中的子项都会添加class，具体看预览。

https://jsfiddle.net/forheyin...

解决方案

<script src="//unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<ul class="list">
                <li v-for="(i,index1) in alInfo" class="son">
                  <p>
                    <span  @click="i.isA = !i.isA">个人常用短语(点击展开)</span>
                  </p>
                  <ul v-show="i.isA">
                    <li v-for="(s, index2) in i.list"  @click="tInfo(s, index1 ,index2)" :class="[acts == index1 + ',' + index2 ? 'active' : '']">
                      <p>点我就我加class，其它不能加</p>
                    </li>
                  </ul>
                </li>
              </ul>
</div>

var Main = {
    data() {
      return {
      act:0,
      acts: -1,
      isAll: true,
      alInfo: [],
      isAct: false
      }
    },
    created () {
        let test = [{name: 1,list:[{son: 1},{sons: 1}]}, {name: 2,list:[{son: 2},{sons: 2}]}]
      test.forEach(a => { a.isA = false })
      test.forEach(a => {
        a.isA = false
        a.list.forEach(b => {
          b.isA = false
        })
      })
      this.alInfo = test
      console.log(this.alInfo)
    },
    methods: {
       tInfo (s, index1, index2) {
        s.isA = !s.isA
        this.acts = index1 + ',' + index2
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

这篇关于vue.js - 二级列表，怎么给子列表添加class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！