vue-cli實現最簡單的全選、全不選、反選功能。不容錯過呦！！！！！話很少說直接上代碼。。。。

<template>
  <div class="hello">
    <input type="button" name="all" value="全選" @click="allSelect"/>
    <input type="button" name="fan" value="全不選" @click="noSelect" />
    <input type="button" name="fan" value="反選" @click="fanSelect" />
    <ul v-for="(list,index) in dataCheck" :key="index">
      <li>
        <input type="checkbox" :value="list.text" v-model="list.check"/>
        {{list.text}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataCheck: [
        { text: '蘋果', check: false },
        { text: '芒果', check: false },
        { text: '百香果', check: false },
        { text: '果棟', check: false }
      ]
    }
  },
  methods: {
    allSelect () {
      console.log(1258)

      var datache = this.dataCheck
      for (var i = 0; i < datache.length; i++) {
        datache[i].check = true
      }
      this.dataCheck = datache
    },
    noSelect () {
      var datache = this.dataCheck
      for (var i = 0; i < datache.length; i++) {
        datache[i].check = false
      }
      this.dataCheck = datache
    },
    fanSelect () {
      var datache = this.dataCheck
      for (var i = 0; i < datache.length; i++) {
        datache[i].check = !datache[i].check
      }
      this.dataCheck = datache
    }
  }
}
</script>