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

vue 實現全選全不選

<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>

vue 實現全選全不選1

<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>