Vue复选框批量删除示例

Vue复选框批量删除

通过使用v-model指令绑定单个复选框

例如<input type="checkbox" id="checkbox" v-model="checked">

而本次我们要做的示例大致是这样的，首先可以增加内容，然后通过勾选来进行单独或者批量删除 ，但是在此处就可以进行批量操作。

通过勾选原神和明日进行批量删除后，发现成功了，那么这就是表名咱们的操作没有问题，接下来就要具体代码实现。

具体代码实现

body中div，挂载点是zjw，也就是张俊伟的缩写，当然这可以自己写什么都行，只要与Vue里面的el对应

<div id="zjw">
<span>添加一条内容</span>
<input placeholder="输入内容" v-model="value"/>
<button @click="add()">添加</button>
  <ul>
    <li v-for="(item,index) in list" :key="index">
        <input type="checkbox" v-model="item.c"/>
        <span>{{item.d}}</span>
        <button @click="remove(index)">删除</button></li>
  </ul>
    <button @click="removeAll()">批量删除</button>
</div>
<script>
  const app=new Vue({
    el:'#zjw',
    data(){
      return{
        list:[{d:'洗碗',c:false},{d:'擦地',c:false}],
        value:''
      }
    },
    methods:{
      add(){
          adds={
              d:this.value,
              c:false
          }
        this.list.push(adds)
        this.value=''
      },
      remove(i){
          if(this.list[i].c==true)
        this.list.splice(i,1)
      },
        removeAll(){
            for (var i = this.list.length - 1; i >= 0; i--)
                if (this.list[i].c==true) this.list.splice(i, 1);
        }
    }
  })
</script>

分析环节

添加的框

添加操作用@click绑定了一个add()
在input中的v-model是value

<span>添加一条内容</span>
<input placeholder="输入内容" v-model="value"/>
<button @click="add()">添加</button>

下面是script内容
在data中我是用了对象数组来做，里面用了一个c来放复选的状态false没选，true选

而add中也是每次添加的不止文字，还有false或者true,通过this.list.push(adds)加入到数组队尾

data(){
      return{
        list:[{d:'洗碗',c:false},{d:'擦地',c:false}],
        value:''
      }
    },
    methods:{
      add(){
          adds={
              d:this.value,
              c:false
          }
        this.list.push(adds)
        this.value=''
      },

对于单个删除和批量操作

这里通过<li v-for="(item,index) in list" :key="index"> <input type="checkbox" v-model="item.c"/> <span>{``{item.d}}</span> <button @click="remove(index)">删除</button></li>

来讲data中的数据显示出来，并且可以删除或者批量

在button中，使用v-model="item.c"绑定复选框的状态

 <ul>
    <li v-for="(item,index) in list" :key="index">
        <input type="checkbox" v-model="item.c"/>
        <span>{{item.d}}</span>
        <button @click="remove(index)">删除</button></li>
  </ul>
    <button @click="removeAll()">批量删除</button>

而单个删除就是如下操作，一个简单判断this.list[i].c的值就行

对于多选其实也就是多了一个在数组中的循环
for (var i = this.list.length - 1; i >= 0; i--)就可以完成批量删除了

  remove(i){
          if(this.list[i].c==true)
        this.list.splice(i,1)
      },
        removeAll(){
            for (var i = this.list.length - 1; i >= 0; i--)
                if (this.list[i].c==true) this.list.splice(i, 1);
        }