过滤器案例：

<!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. 11种排序算法（Python实现）

    10种排序算法(Python实现) 冒泡排序 1. 两重循环,每次都将一个点移动到最终位置 def BubbleSort(lst): n=len(lst) if n<=1: return lst ...

  2. kali linux主题美化

    Kali 主题美化 先放张安装了主题的图片: 执行下面命令下载主题文件: git clone https://github.com/daniruiz/flat-remix-gtk.git git cl ...

  3. 喜讯！INFINI Easysearch 在墨天轮数据库排名中挺进前30！

    近日,2023 年 10 月的 墨天轮中国数据库流行度排行 火热出炉,本月共有 283 个数据库参与排名,中国数据库行业竞争日益激烈.其中,极限科技旗下软件产品 INFINI Easysearch 稳 ...

  4. Spring扩展——BeanFactory和FactoryBean

    BeanFactory和FactoryBean BeanFactory和FactoryBean长得很相似,也很容易让我们产生误解,特别是对于初学者而言,搞懂他俩关系非常有必要,因为这两个接口,是Spr ...

  5. mongodb插入文档,更新文档和检索文档

    import com.mongodb.client.*; import com.mongodb.client.MongoClient; import com.mongodb.client.model. ...

  6. arm linux 移植 curl

    背景 libcurl是一个跨平台的开源网络协议库,支持http, https, rtsp等多种协议 .libcurl同样支持HTTPS证书授权,HTTP POST, HTTP PUT, FTP 上传, ...

  7. FM20S用户手册-Linux开发环境搭建

  8. 【JavaScript】聊聊js中关于this的指向

    前言 最近在看回JavaScript的面试题,this 指向问题是入坑前端必须了解的知识点,现在迎来了ES6+的时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,所以刚好总结一下Ja ...

  9. Unity 中关于SubMesh的拾取问题

    问题背景 最近在开发一个功能,钻孔功能,每一层(段)都需要单独拾取,显示不同的颜色,使用不同材质 问题分析 对于这个功能,由于上述需求,很容易想到用submesh实现,但是主要问题是在于对于Subme ...

  10. Linux 提权-SUID/SGID_2

    本文通过 Google 翻译 SUID | SGID Part-2 – Linux Privilege Escalation 这篇文章所产生,本人仅是对机器翻译中部分表达别扭的字词进行了校正及个别注释 ...