Vue.js Todo List 全选功能实现及优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue.js Todo List 全选功能实现及优化</title>
<script src="./vue.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
text-indent: 0;
}
li:hover {
background-color: #f4f4f4;
}
li:hover .del {
display: inline-block;
}
.del {
display: none;
}
<pre><code> #app {
width: 600px;
margin: 100px auto;
border: 1px solid pink;
padding: 10px;
display: flex;
flex-direction: column;
}
.fl {
float: left;
}
.fr {
float: right;
}
</style>
</code></pre>
</head>
<body>
<div id="app">
<headers @add-event="addEvent"></headers>
<mains
:list="list"
@del-event="delEvent"
:is-all="isAll"
@change-is-all="changeIsAll"
></mains>
<!-- // !一定要记住自定义事件监听要使用@或者c-on -->
<footers @all-select="allSelect" :is-all="isAll"></footers>
</div>
<!-- headers -->
<script type="text/html" id="headers">
<input
style="text-indent: 1em;height: 30px;"
type="text"
placeholder="请输入待办事项"
v-model="val"
@keyup.enter="add"
/>
</script>
<!-- mains -->
<script type="text/html" id="mains">
<ul>
{{checkboxList}}
<li
v-for="(item,index) in list"
:key="index"
style="height: 40px; line-height: 40px;"
>
<input type="checkbox" v-model="checkboxList" :value="item" />
{{item}}
<button
@click="del(index)"
style="margin-right: 0px;margin-top: 10px;"
class="fr del"
>
删除
</button>
<hr />
</li>
</ul>
</script>
<!-- footers -->
<script type="text/html" id="footers">
<footer style="padding-top: 10px;">
<input @change="all" type="checkbox" v-model="checkAll" />
已完成{{}}件/总计{{}}件
<button style="margin-right: 0px;" class="fr">清除已完成</button>
</footer>
</script>
<script>
// headers
const headers = {
template: "#headers",
data() {
return {
val: ""
};
},
methods: {
add() {
this.$emit("addEvent", this.val);
this.val = "";
}
}
};
// mains
const mains = {
template: "#mains",
props: ["list", "isAll"],
data() {
return {
checkboxList: []
};
},
methods: {
del(val) {
this.$emit("delEvent", val);
},
changeIsAll(val) {
this.$emit("changeIsAll", val);
}
},
watch: {
isAll(val) {
if (val) {
this.checkboxList = this.list;
} else {
this.checkboxList = [];
}
},
checkboxList() {
//! 错误的地方
//!this.list和this.checkboxList是两个不同的数组对象，即使它们的内容相同，它们的引用也不同，所以this.checkboxList === this.list永远会返回false。要判断两个数组是否具有相同的内容，可以使用数组的every方法来进行比较。
<pre><code> // console.log(this.checkboxList === this.list);
// if (this.checkboxList === this.list) {
// console.log(111);
// }
// if (this.list.every((item) => this.checkboxList.includes(item))) {
// this.changeIsAll(true);
// } else {
// this.changeIsAll(false);
// }
if (this.list.every(item => this.checkboxList.includes(item))) {
this.changeIsAll(true);
} else {
this.changeIsAll(false);
}
}
}
};
// footers
const footers = {
template: "#footers",
props: ["isAll"],
data() {
return {
checkAll: false
};
},
methods: {
all() {
this.$emit("allSelect", this.checkAll);
}
},
watch: {
isAll() {
this.checkAll = this.isAll;
}
}
};
// 父组件
const app = {
data() {
return {
list: ["美美的睡上一觉", "开心的吃大餐", "吃饭", "睡觉", "打豆豆"],
isAll: false
};
},
methods: {
addEvent(val) {
this.list.unshift(val);
},
delEvent(val) {
this.list.splice(val, 1);
},
allSelect(val) {
this.isAll = val;
},
changeIsAll(val) {
console.log(val);
this.isAll = val;
}
},
components: {
headers,
mains,
footers
}
};
const vm = Vue.createApp(app);
vm.mount("#app");
</script>
</code></pre>
</body>
</html>
<!-- 为什么这段代码全选后,再取消列表项中的任意一项代码,整个程序的复选框全部都取消?我想要的效果是取消哪一个列表项就只取消哪一个列表项 -->
原文地址: https://www.cveoy.top/t/topic/qnkS 著作权归作者所有。请勿转载和采集!