当前位置：首页 > news >正文

filter过滤含义以及操作实战项目todolist

news 来源：原创 2024/4/30 17:04:38

过滤器的意义在于就是要把你想要过滤掉的信息给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="https://cdn.jsdelivr.net/npm/vue/dist/vue.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>
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/1.4.6/tailwind.min.css"
    />
  </head>
  <body>
    <div id="app">
      <h1 class="text-center">待办事项</h1>
      <input
        placeholder="请输入代办事项"
        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?'已完成':'未完成'}}
              <button
                class="m-4 pt-1 p-2 bg-pink-400 text-white"
                @click="item.status = false"
                v-show="item.status">
                完成退回
              </button>
              
            </td>
            <td class="border">
              <button
                class="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="https://cdn.jsdelivr.net/npm/vue/dist/vue.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() {
            // 查找没有选中的，把他们赋值给list
            this.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>