过滤器案例：

<!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>

  <script src="./../lib/vue.js"></script>

</head>

<body>

<div id="app">

  <!--

    过滤器(Filters) 是vue为开发者提供的功能，常用于文本的格式化。

    过滤器可以用在两个地方:插值表达式和v-bind属性绑定。

    过滤器应该被添加在JavaScript表达式的尾部,由“管道符”进行调用,示例代码如下:

    vue filters中 this指向的不是vue实例，但想要获取vue实例中data中的数据，

    可以采用下面方法。在 beforeCreate的钩子函数中将vue实例赋值给全局变量_self，

    然后filters中即可通过_self获取data中数据

    过滤器的注意点

    1.要定义到filters 节点下，本质是一个函数

    2.在过滤器函数中，-定要有return值

   -->

  <!--在双花括号中通过“管道符"调用capitalize 过滤器，对message的值进行格式化-->

  <p>{{ message | capitalize }}</p>

  <!--在v-bind中通过“管道符"调用formatId 过滤器，对rawId的进行格式化-->

  <div v-bind:id="rawId | formatld"></div>

</div>

<script>

const VIEW_MODEL = new Vue({

  el: '#app', // 控制的元素实例，

  data: {

    message: '1003',

    rawId: 1001,

    list: [

      { id: '1001', name: '类型1'},

      { id: '1002', name: '类型2'},

      { id: '1003', name: '类型3'},

      { id: '1004', name: '类型4'},

      { id: '1005', name: '类型5'},

      { id: '1006', name: '类型6'},

    ],

    list2: [

      { id: 1001, name: '主键1'},

      { id: 1002, name: '主键2'},

      { id: 1003, name: '主键3'},

      { id: 1004, name: '主键4'},

      { id: 1005, name: '主键5'},

      { id: 1006, name: '主键6'},

    ]

  },

  beforeCreate() {

    // 使用钩子函数把vue实例赋值给_self变量

    _self = this

  },

  filters: {

    capitalize(val) {

      // 过滤器方法一定要有返回值, 入参就是管道符前面的变量

      const content = '无类型'

      if (!val) return content

      // 注意访问data属性的值时无法使用this获取，通过钩子函数赋值的变量访问

      // https://blog.csdn.net/to_the_Future/article/details/122083980

      const type = _self.list.find(x => x.id === val)

      if (!type) return content

      return type.name

    },

    formatld(val) {

      const content = '无主键'

      if (!val) return content

      const type = _self.list2.find(x => x.id === val)

      if (!type) return content

      return type.name

    }

  }

})

</script>

</body>

</html>

　

全局过滤器和实例过滤器

<!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>

  <script src="./../lib/vue.js"></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.6.0/dayjs.min.js"></script>

</head>

<body>

<!--

  创建全局过滤器，对每一个Vue实例都可以处理

    Vue.filter('过滤器名称', val => {

      if (!val) return ''

      const type = list.find(x => x.id === val)

      if (!type) return ''

      return type.name

    })

  如果局部过滤器和全局过滤器一样名字，则调用局部过滤器

  Vue支持连续过滤器

  类似linux的管道符，第一个过滤器完成后交给后面的过滤器继续执行

  {{item.time | filterFunctionA | filterFunctionB | ... }}

  过滤器参数传递问题

  1、首个参数一定是管道符传递过来的参数，后面的入参才是自定义的

  {{item.time | filterFunction(val1, val2, ...) }}

  filters: {

    filterFunction(arg1, arg2, ...) {

    }

  }

 -->

<div id="app">

  <p>{{ message | capitalize }}</p>

  <p>{{ createTime | dateFormat }}</p>

</div>

<div id="app2">

  <p>{{ message | capitalize }}</p>

</div>

<script>

// dayJS资源引入

// const DAYJS = require('dayjs')

const list = [

  { id: '1001', name: '全局类型1'},

  { id: '1002', name: '全局类型2'},

  { id: '1003', name: '全局类型3'},

  { id: '1004', name: '全局类型4'},

  { id: '1005', name: '全局类型5'},

  { id: '1006', name: '全局类型6'}

]

Vue.filter('capitalize', val => {

  if (!val) return ''

  const type = list.find(x => x.id === val)

  if (!type) return ''

  return type.name

})

// 全局的时间过滤器

Vue.filter('dateFormat', val => {

  // 可以安装MomentJS处理

  // DAYJS处理

  const dateString = dayjs(val).format('YYYY-MM-DD')

  console.log(dateString)

  return dateString

})

const VIEW_MODEL1 = new Vue({

  el: '#app',

  data: {

    message: '1003',

    createTime: new Date(),

    list: [

      { id: '1001', name: '局部类型1'},

      { id: '1002', name: '局部类型2'},

      { id: '1003', name: '局部类型3'},

      { id: '1004', name: '局部类型4'},

      { id: '1005', name: '局部类型5'},

      { id: '1006', name: '局部类型6'},

    ],

  },

  beforeCreate() {

    // 使用钩子函数把vue实例赋值给_self变量

    _self = this

  },

  filters: {

    capitalize(val) {

      // 过滤器方法一定要有返回值, 入参就是管道符前面的变量

      const content = '无类型'

      if (!val) return content

      // 注意访问data属性的值时无法使用this获取，通过钩子函数赋值的变量访问

      // https://blog.csdn.net/to_the_Future/article/details/122083980

      const type = _self.list.find(x => x.id === val)

      if (!type) return content

      return type.name

    },

  }

})

const VIEW_MODEL2 = new Vue({

  el: '#app2',

  data: {

    message: '1005',

  }

})

</script>

</body>

</html>

　　

【Vue2】Filter 过滤器的更多相关文章

  1. vue2 filter过滤器的使用

    本章主要讲vue2的过滤器的使用 1.先介绍下vue1与vue2的filter区别,也就是vue2更新的地方 a: 2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我 ...

  2. vue2.0过滤器

    最近一阶段,项目上比较清闲,有了更多的时间可以研究一下vue了. 这里记录一下关于vue2.0过滤器的学习. vue2.0删除了所有的框架自带的过滤器,也就是说,如果你在vue2.0当中想用过滤器,那 ...

  3. filter 过滤器（监听）

    Filter 过滤器 1.简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, ...

  4. Java防止SQL注入2（通过filter过滤器功能进行拦截）

    首先说明一点,这个过滤器拦截其实是不靠谱的,比如说我的一篇文章是介绍sql注入的,或者评论的内容是有关sql的,那会过滤掉:且如果每个页面都经过这个过滤器,那么效率也是非常低的. 如果是要SQL注入拦 ...

  5. Filter(过滤器)学习

    一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...

  6. javaweb学习总结(四十二)——Filter(过滤器)学习

    一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...

  7. Filter过滤器简单应用( 接口访问控制 )

    一.描述 在提供安卓.IOS客户端接口时,可以在登陆接口分配Session给客户端,用于判断其他接口是否是合法访问,以避免将所有的接口都暴露在web中可以由路径直接访问.但是最近的一个项目中的移动接口 ...

  8. 如何配置Filter过滤器处理JSP中文乱码

    参考Tomcat服务器目录webapps的examples示例 简单配置步骤:1.在项目web.xml文件添加过滤器标记<filter>和<filter-mapping>:2. ...

  9. Filter(过滤器)常见应用

    孤傲苍狼 只为成功找方法,不为失败找借口! javaweb学习总结(四十六)——Filter(过滤器)常见应用 一.统一全站字符编码 通过配置参数charset指明使用何种字符编码,以处理Html F ...

  10. Filter过滤器（1）

    Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件或静态 ht ...

随机推荐

  1. python-一种去掉前后缀获取子串的方法

    假设有一个字符串,其数据组成方式为:"mode_id1_str_id2",其中id1和id2为任意个数的数字,若存在mode,则id1必然也存在,否则都不存在:id2可有可没有. ...

  2. react祖先与子孙多层传值

    先做数据源store.js文件 // 状态 store 统一数据源 import React, { createContext } from 'react' // Provider 发布消息 // C ...

  3. 大模型高效微调-LoRA原理详解和训练过程深入分析

    博客首发于我的知乎,详见:https://zhuanlan.zhihu.com/p/702629428 一.LoRA原理 LoRA(Low-Rank Adaptation of LLMs),即LLMs ...

  4. 为什么说 Mybatis 是半自动 ORM 映射工具？它与全自动的区别在哪里？

    Hibernate 属于全自动 ORM 映射工具,使用 Hibernate 查询关联对象或者关联集合对象时,可以根据对象关系模型直接获取,所以它是全自动的.而 Mybatis 在查询关联对象或关联集合 ...

  5. javascript高级编程笔记第五章

    chapter 5 5.5 Function类型 未完待续 函数实际上是对象,每个函数都是Function类型的实例,因此与其他引用类型一样具有属性和方法 因此函数名实际上就是函数对象的指针,不会与某 ...

  6. redis锁定商品解决并发售卖问题 RedisUtil工具类

    redis锁定商品解决并发售卖问题 RedisUtil工具类 redis数据类型介绍: //伪代码,基本思路 //1.出redis,每次在选定商品之后,先检查redis是否已经锁定该商品,避免超卖.S ...

  7. Sealos 5.0 正式发布，云本应该是操作系统

    把所有资源抽象成一个整体,一切皆应用,这才是云应该有的样子. 2018 年 8 月 15 日 Sealos 提交了第一行代码. 随后开源社区以每年翻倍的速度高速增长. 2022 年我们正式创业,经历一 ...

  8. Coding:小写一个debugfs

    Coding:小写一个debugfs ​ 上一次整活还是在上一个月,写了一个简单的module并且熟悉了module的挂载查看和卸载.这一次我们自然玩一个大的,就是利用linux的debugfs AP ...

  9. C#使用Aspose将Word\HTML 转换成PDF文件

    写在前面 Aspose 这个是收费的,直接使用是有水印的 需要用到的dll文件 ==> Aspose.Words.dll.Aspose.HTML.dll.Aspose.Total.lic(授权文 ...

  10. SpringBoot实现RequestBodyAdvice和ResponseBodyAdvice接口

    Spring Boot 提供了一种机制,允许开发者在请求体(RequestBody)和响应体(ResponseBody)被处理之前和之后执行自定义逻辑.这通过 RequestBodyAdvice 和 ...