过滤器案例：

<!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. react mock数据

    为什么要做假数据,因为后端开发接口没有哪么快,此时就需要自己来模拟请求数据. 模拟的数据字段,需要和后端工程师沟通. 创建所需数据的json文件 json-server 此命令可以帮助我们快速创建一个 ...

  2. Linux扩展篇-shell编程（五）-流程控制（三）-for语句

    基本语法: 格式一 for(( 初始值; 循环控制条件; 变量变化)) do statements done 格式二 for 变量 in 值1 值2 值3 ... do statements done ...

  3. CSS 属性计算

    CSS 属性计算过程 你是否了解 CSS 的属性计算过程呢? 有的同学可能会讲,CSS属性我倒是知道,例如: p{ color : red; } 上面的 CSS 代码中,p 是元素选择器,color ...

  4. 剖析 Kafka 消息丢失的原因

    目录 前言 一.生产者导致消息丢失的场景 场景1:消息体太大 解决方案 : 1.减少生产者发送消息体体积 2.调整参数max.request.size 场景2:异步发送机制 解决方案 : 1.使用带回 ...

  5. python json反序列化为对象

    在Python中,将JSON数据反序列化为对象通常意味着将JSON格式的字符串转换为一个Python的数据结构(如列表.字典)或者一个自定义的类实例.虽然Python的标准库json模块不提供直接将J ...

  6. git clone 时拉取子模块

    git clone 时拉取子模块 对还未下载的项目: git clone --recursive 对已下载的项目: git submodule sync git submodule update -- ...

  7. dense并行训练1-流水线并行

    并行训练-流水线 简述 并行训练主要有三种策略: 数据并行训练加速比最高,但要求每个设备上都备份一份模型,显存占用比较高,但缺点是通信量大. 张量并行,通信量比较高,适合在机器内做模型并行. 流水线并 ...

  8. .NET Core MVC基础之页面传值方式📃

    .NET Core MVC基础之页面传值方式 前言 最近工作太忙了,浅浅更新一下.NET基础知识.大部分面试官都会问.NET页面传值的几种方式,那么接下来就来细讲与实现一下吧! 页面传值分成两类 第一 ...

  9. 开源日志组件Sejil--附带日志管理界面

    1.开源日志组件源码:  https://github.com/alaatm/Sejil 2.下载下来发现里面对于不同的.net core 版本的配置提供了对应的示例 .Net Core 3.1 Pr ...

  10. VS Code Go开发环境配置

    1.安装Go 下载网址:https://go.dev/doc/install 根据自己的操作系统来进行安装,官网针对Windows.Linux.macOS都有对应教程.安装完成后打开终端,输入go v ...