鍍金池/ 問答/HTML/ vue如何實(shí)現(xiàn)列表點(diǎn)擊選中（可多選）再次點(diǎn)擊取消選中狀態(tài)

vue如何實(shí)現(xiàn)列表點(diǎn)擊選中（可多選）再次點(diǎn)擊取消選中狀態(tài)

最近項(xiàng)目中有個(gè)頁(yè)面是分期借款的賬單頁(yè)面，有很多未還款的期數(shù)，用戶此時(shí)點(diǎn)擊一個(gè)分期即可選中，再次點(diǎn)擊就是不選中的狀態(tài)，因?yàn)槭切率?，所以這里不知道怎么操作了， 希望大家能幫我看看；

clipboard.png

回答
編輯回答
只愛你

https://segmentfault.com/q/10...
我之前答過和這個(gè)一樣的問題

2018年9月16日 04:52
編輯回答
默念

不上代碼怎么看..? 不過可以提供個(gè)思路, 每項(xiàng)遍歷時(shí)綁定一個(gè)點(diǎn)擊事件, 事件開頭寫個(gè)狀態(tài)變量存放到data中, 默認(rèn)是false, 點(diǎn)擊后變量取反. 就可以做到toggle這種效果了.

2017年5月16日 10:57
編輯回答
歆久

可以這樣子?？梢栽O(shè)置數(shù)據(jù)里面的check狀態(tài)

<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>
2017年6月10日 03:52