vue列表渲染 点击添加状态

第一种写法

<div v-for="(item, index) in items" :key="index">
  <span :class="{active: item.checked}" @click="test(item)">{{item.name}}</span>
</div>

data() {
  checked: [],
  items: [
    {
      name: 'aa',
      checked: false
    },
    {
      name: 'aa',
      checked: false
    }
  ]
}

test (item) {
  if (item.checked) {
    item.checked = !item.checked
  } else {
    item.checked = true
  }
}

第二种写法

<div v-for="(item, index) in items" :key="index">
  <span :class="{active: checked.includes(index)}" @click="test(index)">{{item.name}}</span>
</div>

test (index) {
  let idx = this.checked.indexOf(index)
  if (idx > -1) {
    this.checked.splice(idx, 1)
  } else {
    this.checked.push(index)
  }
}