基于vue的全选与反选案例
Posted 咖啡壶子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于vue的全选与反选案例相关的知识,希望对你有一定的参考价值。
案例展示
代码详解
<template>
<div>
<span>全选:</span>
<!-- 4. v-model 关联全选 - 选中状态 -->
<input type="checkbox" v-model="isAll"/>
<button @click="btn">反选</button>
<ul>
<li v-for="(obj, index) in arr" :key="index">
<!-- 3. 对象.c - 关联 选中状态 -->
<input type="checkbox" v-model="obj.c"/>
<span> obj.name </span>
</li>
</ul>
</div>
</template>
<script>
// 目标: 小选框 -> 全选
// 1. 标签+样式+js准备好
// 2. 把数据循环展示到页面上
export default
data()
return
arr: [
name: "猪八戒",
c: false,
,
name: "孙悟空",
c: false,
,
name: "唐僧",
c: false,
,
name: "白龙马",
c: false,
,
],
;
,
// 5. 计算属性-isAll
computed:
isAll:
set(val)
// 7. 全选框 - 选中状态(true/false)
this.arr.forEach(obj => obj.c = val)
,
get()
// 6. 统计小选框状态 -> 全选状态
// every口诀: 查找数组里"不符合"条件, 直接原地返回false
return this.arr.every(obj => obj.c === true)
,
methods:
btn()
// 8. 让数组里对象的c属性取反再赋予回去
this.arr.forEach(obj => obj.c = !obj.c)
;
</script>
<style>
</style>
以上是关于基于vue的全选与反选案例的主要内容,如果未能解决你的问题,请参考以下文章