Checkbox-Funktion zum Auswählen und Löschen mehrerer Elemente mit vue.js implementieren

template代码：

<template> 
<div class="hello"> 
<ul> <li v-for="(item, index) in proData"> 
<label for=""> 
<input type="checkbox" :value="index" v-model="selectArr"> 
</label>{{item.name}} 
</li>： 
</ul> 
<button type="" @click="del">删除</<button>{{selectArr}} 
<label> 
<input type="checkbox" class="checkbox" @click="selectAll" />全选 
</label> 
</div> 
</template>

script部分：

<script>
var proData = [{
  "name": "j"1ax"
}, {
  "name": "j"2ax"
}, {
  "name": "j"3ax"
}, {
  "name": "j"4ax"
}]
export default {
  name: 'hello',
  data() {
    return {
      proData: proData,
      selectArr: []
    }
  },
  created() {
    this.$http.get('/api/home').then(function(response) {
      response = response.body;
      this.proData = response.data;
    })}}
  },
  methods: {
    del() {
      let arr = [];
      var len = this.proData.length;
      for (var i = 0; i < len; i++) {
        if (this.selectArr.indexOf(i) >= 0) {
          console.log(this.selectArr.indexOf(i))
        } else {
          arr.push(proData[i]);
        }
      }
      this.proData = arr;
      this.selectArr = [];
    },
    selectAll(event) {
      var _this = this;
      console.log(event.currentTarget)
      if (!event.currentTarget.checked) {
        this.selectArr = [];
      } else { //实现全选
        _this.selectArr = [];
        _this.proData.forEach(function(item, i) {
          _this.selectArr.push(i);
        });
      }
    }
  }
}
</script>

Die obigen Informationen sind von mir给大家介绍的使用vue.js实现checkbox的全选和多个的删除功能，希望对大家有所帮助。如果您有任何疑问，请给我留言，我会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheber. Der Inhalt wurde von Internetnutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Diese Website übernimmt keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte finden, die möglicherweise urheberrechtlich geschützt sind, senden Sie bitte eine E-Mail an: notice#oldtoolbag.com (Wenn Sie eine Beschwerde einreichen möchten, ersetzen Sie bitte # durch @) und fügen Sie relevante Beweise bei. Sobald nachgewiesen wird, dass Inhalte urheberrechtlich geschützt sind, wird diese Website die fraglichen Inhalte sofort löschen.