vuejs过滤器及生命周期

最新推荐文章于 2024-11-12 20:45:00 发布

男孩12

最新推荐文章于 2024-11-12 20:45:00 发布

阅读量335

点赞数

分类专栏： vuejs 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51666715/article/details/122590792

版权

vuejs 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本章思维导图
https://www.kdocs.cn/view/l/ch5doSGflyOr

过滤器

本章节，作者将用一个项目来进行讲述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      input {
        border: 2px solid rgba(78, 106, 148, 0.4);
        outline: none;
      }
      .id {
        margin-right: 10px;
      }
      .btn {
        width: 60px;
        height: 30px;
        background-color: #008c8c;
        text-align: center;
        line-height: 30px;
        letter-spacing: 0.5em;
        border: none;
        color: #fff;
        cursor: pointer;
        margin-right: 20px;
      }
      table {
        width: 100%;
        text-align: center;
        border: 1px solid #f4f4f4;
        border-collapse: collapse;
        margin-top: 20px;
        cursor: pointer;
      }
      table thead th {
        width: 25%;
        line-height: 25px;
        height: 25px;
        border: 1px solid rgba(66, 63, 63, 0.5);
      }
      table tbody td {
        height: 25px;
        line-height: 25px;
        border: 1px solid rgba(66, 63, 63, 0.5);
      }
      table tbody tr:nth-child(1) {
        background-color: rgba(109, 104, 104, 0.5);
      }
      table tbody tr:hover {
        background-color: rgba(104, 100, 100, 0.5);
      }
    </style>
    <!-- 导包 -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- #app就是mvvm中的v -->
      id：<input type="text" class="id" v-model="id" />
        <!-- @keyup.13 13是回车的sak码值,也可以写成enter,键盘修饰符 还有：.tab .delete .esc-->
      name：<input type="text" class="name" v-model="name" @keyup.f2="add" />
      <!-- v-on的缩写是@，作用是给元素绑定事件  -->
      <button class="btn" @click="add">添加</button>
      <!-- 进行对我们输入关键字，显示对应的品牌名 v-model作用允许双向数据绑定 -->
      <input type="text" placeholder="请输入关键字" v-model="keyword" />
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>汽车品牌</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- {{}}就是插值表达式   search(keyword)自定义的方法 -->
          <tr v-for="item in search(keyword)">
            <td v-text="item.id"></td>
            <td>{{item.name}}</td>
            <!-- 过滤器:vuejs允许我们自定义过滤器，用来作为一些文本格式,只适用于插值表达式和v-bind   {{'需要过滤的数据' | '自定义过滤器的名字'}} -->
            <td>{{item.time | arr}}</td>
            <!-- 我们定义的事件名加上()是可以的,也可以省略不写,并且在其中写值是传参的意思 -->
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
          </tr>
        </tbody>
      </table>
    </div>
    <script>
        //自定义键盘修饰符
        Vue.config.keyCodes.f2=113;
      //定义一个全局的日期过滤器
      // Vue.filter（arg1,arg2） arg1:表示的是我们自定义过滤器的名字,arg2:回调函数
      //其中回调函数function(arg1){}  arg1:必然是我们将要筛选的数据
      //es6新增的方法，形参传值
      Vue.filter("arr", function (data, ptnback = "") {
        var dt = new Date(data);
        var y = dt.getFullYear();
        //es6新增方法:padStart(maxlength,filter='')   maxlength:允许的长度, filter用什么字符填充
        var M = (dt.getMonth() + 1).toString().padStart(2, "0");
        var D = dt.getDate().toString().padStart(2, "0");
        if (ptnback.toLowerCase() === "yyyy-mm-dd") {
          return `${y}-${M}-${D}`;
        } else {
          var h = dt.getHours().toString().padStart(2, "0");
          var m = dt.getMinutes().toString().padStart(2, "0");
          var s = dt.getSeconds().toString().padStart(2, "0");
          return `${y}-${M}-${D} ${h}:${m}:${s}`;
        }
      });
      //new一个vue的实例化对象,这个j是mvvm中的vm
      var vm = new Vue({
        //说明模板是哪个
        el: "#app",
        //模板中使用的数据放在这里,这个就是mvvm中的m
        data: {
          id: "",
          name: "",
          keyword: "",
          list: [
            { id: 1, name: "宝马", time: new Date() },
            { id: 2, name: "奔驰", time: new Date() },
          ],
        },
        methods: {
          //当我给按钮绑定了点击事件的时候,可以让我输入的id和name都可以显示到页面中
          add: function () {
            this.list.push({
              id: this.id,
              name: this.name,
              time: new Date(),
            });
            this.id = this.name = "";
          },
          //给我们的a添加删除的效果
          del(id) {
            var index = this.list.findIndex((item) => {
              return item.id == id;
            });
            this.list.splice(index, 1);
          },
          //通过我们的关键字来筛选之中的数据
          search(keyword) {
            var newlist = [];
            this.list.forEach((item) => {
              if (item.name.indexOf(keyword) != -1) {
                newlist.push(item);
                return true;
              }
            });
            return newlist;
          },
        },
        //私有化的过滤选择器放在这里
        filters: {
          //惊奇的发现当我们私有化过滤器的名字和全局过滤器的名字一样的时候，我们的vue会优先使用的是私有化的过滤器
          arr(data, ptnback = "") {
            var dt = new Date(data);
            var y = dt.getFullYear();
            //es6新增方法:padStart(maxlength,filter='')   maxlength:允许的长度, filter用什么字符填充
            var M = (dt.getMonth() + 1).toString().padStart(2, "0");
            var D = dt.getDate().toString().padStart(2, "0");
            if (ptnback.toLowerCase() === "yyyy-mm-dd") {
              return `${y}-${M}-${D}`;
            } else {
              var h = dt.getHours().toString().padStart(2, "0");
              var m = dt.getMinutes().toString().padStart(2, "0");
              var s = dt.getSeconds().toString().padStart(2, "0");
              return `${y}-${M}-${D} ${h}:${m}:${s}`;
            }
          },
        },
      });
    </script>
  </body>
</html>