vue如何实现列表点击选中（可多选）再次点击取消选中状态

Question

最近项目中有个页面是分期借款的账单页面，有很多未还款的期数，用户此时点击一个分期即可选中，再次点击就是不选中的状态，因为是新手，所以这里不知道怎么操作了， 希望大家能帮我看看；

Answer 1

可以这样子。可以设置数据里面的check状态

<div id="main">
     <ul>
       <li v-for="(item, index) in list" :data-index="index" @click="setListCheck(index)"><span>{{ item.check }}</span><span>{{ item.label }}</span></li>
     </ul>
   </div>
   <script>
    new Vue({
      el: '#main',
      data: {
        list: [
          {check: false, label: '1'},
          {check: true, label: '2'},
          {check: false, label: '3'}
        ]
      },
      methods: {
        setListCheck: function(idx) {
          var check = this.list[idx].check;
          this.list[idx].check = check === true ? false : true; 
        }
      }
    });
   </script>

Answer 2

不上代码怎么看..? 不过可以提供个思路, 每项遍历时绑定一个点击事件, 事件开头写个状态变量存放到data中, 默认是false, 点击后变量取反. 就可以做到toggle这种效果了.

Answer 3

https://segmentfault.com/q/10...
我之前答过和这个一样的问题