https://segmentfault.com/n/13...

可以使用v-if或者v-show來決定是否顯示

多個(gè)數(shù)據(jù)肯定不能用同一個(gè)變量控制，一般我會(huì)在選中時(shí)使用vue.set在當(dāng)前數(shù)據(jù)中添加一個(gè)變量，對這個(gè)變量進(jìn)行判斷；

<template>
    <ul>
        <li v-for="item in list" :key="item.id" v-show="item.visible" @click="onCheck(item)">{{item.title}}</li>
    </ul>
</template>
<script>
export default {
  data() {
      return {
          list: [
              {
                  id: 1,
                  title: 'test'
              },
              {
                  id: 2,
                  title: 'test2'
              }
          ]
      }
  },
  methods: {
      onCheck(item) {
          if (item.visible) {
              item.visible = false;
              return;
          }
          this.$set(item, 'visible', true);
      }
  }
}
</script>

更新：
$set應(yīng)該不是太好，可以維護(hù)一個(gè)數(shù)組checkIds，每次選中時(shí)把id加入到checkIds,取消選中時(shí)從數(shù)組中刪除這個(gè)id，全選就是把當(dāng)前數(shù)組的所有id加入到checkIds,取消全選就是清空數(shù)組，判斷是否選中就用indexOf就好了；

給數(shù)組每一項(xiàng)添加check屬性，然后每一項(xiàng)通過，v-if="item.check"來判斷就可以了。

arr.foreach(a=>a.check=false)

遍歷，通過下標(biāo)index來判斷顯隱,v-show="checkIndex === index"

修改：

<div v-for="(item, index) in items"> 
    <span v-show="checkIndex === index">選中</span>
    <span @click="checkIndex = index;">選擇</span>
</div>

嗯，就是這樣，夠詳細(xì)了。