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)
  }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有...
    紫月凌枫阅读 10,184评论 0 16
  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 9,064评论 0 13
  • v-for 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in it...
    angelwgh阅读 683评论 0 0
  • 青春如一首唯美的诗 看那云卷云舒的惬意 品那细水长流的安心 我走过你来过的路 你看过我见过的景 谁说我们的世界只有...
    钰果的妈妈阅读 750评论 10 9
  • K - An abandoned sentiment from past CodeForces - 814A A ...
    Nioge阅读 114评论 0 1