<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<!-- <script src="./vue.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
全选<input type="checkbox" v-model="allCheck" >
<ul>
<li v-for="(item,index) in list" :key="index" >
<input type="checkbox" v-model="item.select"> <label for="">{{item.name}}</label>
</li>
</ul>
</div>
<script>
/*
1. 默认情况下,计算属性只有get方法。只能获取,不能修改。否则程序会报错
2. 如果希望计算属性可以修改,则可以实现set方法
*/
/* 创建vue实例 */
var app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
list: [
{ name: '前端', select: false },
{ name: 'UI', select: false },
{ name: 'Java', select: false },
{ name: 'php', select: false },
{ name: 'python', select: false },
{ name: 'c', select: false },
{ name: '测试', select: false },
{ name: '产品', select: false },
]
},
//计算属性
computed: {
allCheck:{
get(){
// every判断数组里面的每一个元素是否都满足条件
return this.list.every(item => item.select)
},
set(value){
console.log(value)
// 修改数组每一个元素的select值为value
this.list.forEach(item=>item.select = value)
}
}
}
})
</script>
</body>
</html>
购物车的全选和反选
最新推荐文章于 2023-10-09 17:31:55 发布