实战项目todolist"/>
filter过滤含义 以及 操作实战项目todolist
过滤器的意义在于就是要把你想要过滤掉的信息给filter
也就是说，我想的操作
例如
在arr = [1,2,3,4,5,6,7,8] 中，
我想过滤偶数，只留下记述，
那么我在filter 函数中把偶数信息给他，让他过滤掉，那么剩下的就是奇数了
操作如下
let arr = [1,2,3,4,5,6,7,8]
let a = arr.filter(function (x) {
// 过滤的条件
return x % 2 !== 0; // 除以2 的余数不为0 ，那么就是奇数了
})
console.log(a) // [1,3,5,7]
再或者想要偶数
var dataArr= [1, 2, 4, 5, 6, 9, 10, 15];
var r = dataArr.filter(item => {
return item % 2 == 0; // 每一项都除以2 ，余数为0 ，那就是偶数了
});
console.log® // [2, 4, 6, 10]
项目实例：
<!-- 过滤器可以对我们的数据进行一个格式化处理 --><div id="app"><input v-model="msg" /><br /><!-- v-text和{{}}是一样的概念 --><!-- | 过滤器 | 过滤器 --><h5>{{msg | resv | up}}</h5></div><script src=".js"></script><script>var app = new Vue({el: "#app",data: {msg: "", // 默认值为空},methods: {},// 过滤器用来对在页面中的输出数据做一个格式化处理filters: {resv(val) {console.log(val)// 对数据进行处理之后返回 反转拼接return val.split("").reverse().join("-");},up(val) { // 转大写操作return val.toUpperCase();},},});</script>
实例 todolist
要求，
点击完成时，状态由未完成变成已完成，
点击完成退回时，完成按钮显示，状态变成未完成。
点击全部退回时，完成按钮显示，状态变回未完成，完成退回按钮隐藏。
代码如下：
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>todolist</title><linkrel="stylesheet"href=".4.6/tailwind.min.css"/></head><body><div id="app"><h1 class="text-center">待办事项</h1><inputplaceholder="请输入代办事项"class="w-3/5 m-auto border"style="display: block; margin: 1rem auto;"v-model="txt"@keyup.enter="addToList"/><table class="table-auto w-3/5 m-auto"><thead><tr><th class="border text-start"><input v-model="checkAll" type="checkbox" />序号</th><th class="border">事项</th><th class="border">状态</th><th class="border">操作</th></tr></thead><tbody><tr v-for="(item, index) in list" :key="item.id"><td class="border text-start"><input v-model="item.checked" type="checkbox" />{{index+1}}</td><td class="border">{{item.txt}}</td><td class="border">{{item.status?'已完成':'未完成'}}<buttonclass="m-4 pt-1 p-2 bg-pink-400 text-white"@click="item.status = false"v-show="item.status">完成退回</button></td><td class="border"><buttonclass="m-6 pt-1 p-2 bg-green-500 text-white"@click="item.status = true"v-show="!item.status">完成</button><button@click="delItem(item)"class="m-6 pt-1 p-2 bg-red-500 text-white">删除</button></td></tr></tbody></table><button @click="delSelected">删除</button><button @click="endSelected">完成</button><button @click="allReturn">全部退回</button></div><script src=".js"></script><script>var app = new Vue({el: "#app",data: {txt: "", // 输入框的内容list: [], // 所有的数据},methods: {// 添加数据addToList() {this.list.push({id: Date.now(),txt: this.txt,status: false, // 默认状态未完成checked: false,});this.txt = "";},// 删除数据delItem(item) {console.log(item)// 根据id找到索引const index = this.list.findIndex((todo) => todo.id === item.id);this.list.splice(index, 1);},// 删除delSelected() {// 查找没有选中的，把他们赋值给listthis.list = this.list.filter((item) => !item.checked);},// 完成endSelected() {// 循环数据设置所有选中的为完成状态this.list.forEach((item) => {if (item.checked) {item.status = true;}});},// 全部退回allReturn(){this.list.forEach((item) => {if(item.status = true){item.status = false}}); }},computed: {// 全选操作checkAll: {set(val) {this.list.forEach((item) => (item.checked = val));},get() {return (this.list.filter((item) => item.checked).length ==this.list.length);},},},});</script></body>
</html>
更多推荐
filter过滤含义 以及 操作实战项目todolist
发布评论