Vue-cli中如何实现checkbox选中哪个删除哪个

template代码：

<template>

<div>

<ul>

<li v-for='(item,index) in arrList'>

<input type="checkbox" :value='index' v-model="checkedNames"/> {{item}}

</li>

</ul>

{{checkedNames}}

<button @click='btn()'>删除第一个</button>

</div>

</template>

script代码：

<script type="text/javascript">

export default {

data () {

return {

arrList:['a','b','c','d','e'],

checkedNames:[]

}

},

methods:{

btn(){

let arr = [];

var len = thisarrListlength;

for (var i = 0; i < len; i++) {

if (thischeckedNamesindexOf(i)>=0) {

consolelog(thischeckedNamesindexOf(i))

}else{

arrpush(thisarrList[i])

}

}

thisarrList = arr;

thischeckedNames = []

}

}

}

</script>

说一下js大体逻辑，首先选中的值都在checkedNames中了，然后在js中首先进行了循环，然后判断checkedNames中选中的哪个，比如选中是0，2，那么下面就开始在checkedNames中查找0和2有没有，如果有的话不做处理，如果没有的话，放入到新数组中，最后把新的数组赋值给arrList最后得到没有选中的元素，从而选中的就不见了也就意味着删除了。 （BY三人行慕课）

Vuejs的checkbox全选卡顿一般是由于数据量过大或者性能较低造成的。可以采取以下几种方法来解决此问题：

1、减少checkbox的数量：最好的办法就是减少checkbox的数量，如果不太必要，可以考虑把多个checkbox合并在一个checkbox中，这样可以减少Vue在数据计算时间，从而解决卡顿问题。

2、优化Vue组件：给全选checkbox组件添加上 async 钩子，当数据更新完毕之后，才会刷新UI，这样就可以提高性能，减少卡顿现象。

3、使用缓存机制：可以在checkbox的data属性上定义一个变量来缓存数据，只有当数据发生变化的时候，变量才会更新，这样可以减少数据处理量，从而解决卡顿问题。

4、使用计算属性：可以通过使用计算属性来处理大量数据，使渲染性能更高，这样就可以解决checkbox全选卡顿问题。

双向绑定可以绑定到同一个数组

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames">

<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

<label for="mike">Mike</label>

<br>

<span>Checked names: {{ checkedNames | json }}</span>

这样可以不做任何处理，获得所有checked的checkbox。

可是如果需要初始化渲染，一部分checkbox被预选中，v-model需要绑定一个boolen值checked:

<tr v-for="item in list">

<td>

<input type="checkbox" :value="itemvalue" v-model="itemchecked" />

</td>

</tr>

new Vue({

el: 'body',

data: {

list: [{checked:true,value:'a'},{checked:false,value:'b'}]

}

});

利用 filter ， map 来完成

methods: {

getChecked: function() {

// 先透过 filter 筛选出 checked 为 true 的 item

// 在透过 map 只回传 item 的 value

return thislistfilter(item => itemchecked)map(item => itemvalue)

}

}

在vue3中，可以通过设置el-checkbox的v-model绑定的数据类型为Boolean来实现只能单选的效果。具体来说，可以将每个el-checkbox的v-model绑定到同一个Boolean变量，这样只有一个选中的el-checkbox的v-model的值为true，其余的都为false，从而实现只能单选的效果。

原因是因为el-checkbox是一个复选框，如果多个el-checkbox都绑定到同一个Boolean变量，那么它们之间就是互相独立的，不会相互影响。只有单选框（如el-radio）才能实现只能单选的效果。

需要注意的是，如果需要在el-checkbox中使用v-model绑定一个数组，那么可以通过设置el-checkbox的value属性来指定每个el-checkbox对应的值，从而实现多选的效果。例如：

```

<el-checkbox v-model="checkedList" :value="1">选项1</el-checkbox>

<el-checkbox v-model="checkedList" :value="2">选项2</el-checkbox>

<el-checkbox v-model="checkedList" :value="3">选项3</el-checkbox>

```

在这个例子中，checkedList是一个数组类型的变量，每个el-checkbox的value分别为1、2、3。当用户勾选某个el-checkbox时，对应的value值会被添加到checkedList数组中，从而实现多选的效果。

以上就是关于Vue-cli中如何实现checkbox选中哪个删除哪个全部的内容，包括:Vue-cli中如何实现checkbox选中哪个删除哪个、vue的checkbox全选卡顿、vuejs怎样实现列表中checkbox的双向绑定及初始化渲等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！