vue多选功能,vue全选按钮

　　本文主要详细介绍vue的全选功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享了vue全选功能的具体代码，供大家参考。具体内容如下

　　全选思路

　　1.准备标签、样式、js和数据。

　　2.在页面上显示数据周期，而v-为以li

　　3.在全选框中，v-model=isAll //整体状态

　　4.小跑马灯v-model= //单态

　　5.小选择会影响所有选择.定义计算属性isAll来计算小选择框的状态。如果每个搜索数组都不满足条件，它将直接返回false.判断每个小选择框的状态。只要有一个小选择框不为真或者没有勾选，就会返回false，所有选择框的状态都会为false。

　　6.所有选择都会影响小选择.set(val)设置所有选择的状态(真/假).然后，遍历每个小选择框以查看小选择框的状态，并将其状态更改为Val all selections。

　　模板

　　差异

　　全选：/span

　　输入类型=复选框 v-model=isAll /

　　按钮@click=btn 反转/按钮

　　保险商实验所

　　li v-for=(obj，index) in arr :key=index

　　输入类型=复选框 v-model=obj.c /

　　span{{ obj.name }}/span

　　/李

　　/ul

　　/div

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　arr: [

　　{

　　姓名：猪八戒，

　　丙：假的，

　　},

　　{

　　名字：“美猴王”，

　　丙：假的，

　　},

　　{

　　姓名：唐僧，

　　丙：假的，

　　},

　　{

　　姓名：白，

　　丙：假的，

　　},

　　],

　　};

　　},

　　计算值：{

　　伊索：{

　　//全选影响小选择。

　　设置(值){

　　//set(val)设置所有选择的状态(真/假)

　　//我们手动设置所有复选框的状态，所以我们遍历数组中每个对象的C属性，也就是遍历每个小复选框的状态，将其状态改为val all复选框的状态。

　　this . arr . foreach((obj)=(obj . c=val))；

　　},

　　//小复选框影响所有复选框。

　　get() {

　　//确定数组中每个对象的C属性是否等于true，即确定每个小复选框的状态。只要有一个状态不为真或未勾选的小复选框，就会返回false，所有复选框的状态都是false。

　　//every formula:找到数组中的‘不合格’条件，直接原地返回false。

　　返回this . arr . every((obj)=obj . c===true)；

　　},

　　},

　　},

　　方法：{

　　btn() {

　　//实现反向选择

　　//遍历数组中的每一项，使数组中对象的C属性反转，然后赋回。

　　this.arr.forEach((obj)=(obj.c=！obj . c))；

　　},

　　},

　　};

　　/脚本

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。