过滤器案例：

<!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. Vue第三方库与插件实战手册

    title: Vue第三方库与插件实战手册 date: 2024/6/8 updated: 2024/6/8 excerpt: 这篇文章介绍了如何在Vue框架中实现数据的高效验证与处理,以及如何集成E ...

  2. FPS 是啥

    什么是 FPS 呢 ,FPS就是你所编写的应用程序一秒钟运行的次数,一秒钟运行120次,你的 FPS 就是 一百二 什么是帧速率 为什么有帧速率这一说 帧速率在 数学微积分中是平均运行的力度或者说是强 ...

  3. mysql 8.0 客户端

    1.mysql 8.0 command line client 2.mysql workbench

  4. Bind DNS服务——带KEY的区域传送与子域授权

    Linux基础服务--Bind DNS服务 Part3 带KEY的区域传送与子域授权 带KEY的区域传送 上文提到了区域传送,但实际上在区域传送的时,传送的区域文件并不会被加密.因此一般的区域传送并不 ...

  5. 《Javscript实用教程》目录

    图书购买地址: 京东:<Javscript实用教程> 当当:<Javscript实用教程> 天猫:<Javscript实用教程> 注:本书提供源码和ppt课件,下载 ...

  6. 详解Web应用安全系列(3)失效的身份认证

    大多数身份和访问管理系统的设计和实现,普遍存在身份认证失效的问题.会话管理是身份验证和访问控制的基础,并且存在于所有有状态的应用程序中.攻击者可以使用指南手册来检测失效的身份认证,但通常会关注密码转储 ...

  7. 如何在Zynq-7000上烧写PL Image

    由 技术编辑archive1 于 星期六, 06/28/2014 - 10:05 发表 作者:hqin, Xilinx处理器专家FAE 在Zynq-7000上编程PL大致有3种方法: 用FSBL,将b ...

  8. 广播变量的使用-----通过ip查询属于哪个省份

    1,为什么要使用广播变量? 举一个简单的例子,我们要处理一份log文件,里面有ip地址. 20090121000132095572000|125.213.100.123|show.51.com|/sh ...

  9. 《从零开始学习Python爬虫：顶点小说全网爬取实战》

    顶点小说 装xpath helper GitHub - mic1on/xpath-helper-plus: 这是一个xpath开发者的工具,可以帮助开发者快速的定位网页元素. Question:加载完 ...

  10. LabVIEW的自定义按钮

    下载几张图片: 比较好的 网站1:https://www.iconfont.cn/ 网站2:https://yesicon.app/ 选用windows风格按钮控件进行自定义, 自定义的图片分别放入这 ...