Vue过滤器(filter)实现及应用场景详解


Posted in Vue.js onJune 15, 2021

1. 简单介绍

Vue.js 允许你自定义过滤器(filter),可被用于一些常见的文本格式化。

过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

<!-- 在双花括号中 -->
{{ message | filter }}

<!-- 在 `v-bind` 中 -->
<div v-bind:msg="message | filter"></div>

过滤器函数总接收表达式的值作为第一个参数。

在上述例子中,filter 过滤器函数将会收到 message 的值作为第一个参数。

1.1 过滤器可以串联

{{ message | filterA | filterB }}

在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。

1.2 过滤器是 JavaScript 函数可以接收参数

{{ message | filterA('arg1', arg2) }}

filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

2. vue-cli中定义全局过滤器

语法:Vue.filter( filterName,( ) => { return // 数据处理结果 } )

eg:

<div id="app">
  <h3>{{userName | addName}}</h3>
</div>
<script>
// 参数一:是过滤器的名字,也就是管道符后边的处理函数;
// 参数二:处理函数,处理函数的参数同上	
Vue.filter("addName",(value)=>{											            
    return "my name is" + value
})
let vm = new Vue({
    el:"#app",
  	data:{
     userName:"小明" 
    }
})
</script>

2.1 实际开发使用

全局过滤器经常会被在数据修饰上,通常我们把处理函数给抽离出去,统一放在一个.js文件中。

// filter.js 文件

let filterPrice = (value) => {
	return '已收款' + value + '元'
}
let filterDate = (value) => {
    return value + '天'
}

export default {filterPrice,filterDate}

在main.js中 导入 上边 filter.js文件 ,也可以在任何组件中导入 filter.js这个文件,但对于全局过滤器来说,最好是在main.js中定义,导入的是一个对象,所以使用Object.keys()方法,得到一个由key组成的数组,遍历数据,让key作为全局过滤器的名字,后边的是key对应的处理函数,这样在任何一个组件中都可以使用全局过滤器了:

//main.js
 
//下边是2种导入方式,推荐第一种
import * as filters from './utils/filter/filter'
// import {filterPrice,filterDate} from './utils/filter/filter'
 
console.log(filters)
 
Object.keys(filters.default).forEach((item)=>{
  Vue.filter(item,filters.default[item])
})
 
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

Vue过滤器(filter)实现及应用场景详解

3. 在组件中使用 全局过滤器:

// test.vue

<template>
  <div>
    <input type="text" v-model="filterCount" >
    <div>{{filterCount | filterPrice}}</div>
    <div>{{filterCount | filterDate}}</div>
  </div>  
</template>

<script>
export default {
  data(){
    return {
      filterCount:1500
    }
  },
}
</script>

Vue过滤器(filter)实现及应用场景详解

3. vue-cli中定义局部过滤器

// test.vue

<template>
  <div>
    <input type="text" v-model="filterCount" >
    <div>{{filterCount | filterPrice}}</div>
    <div>{{filterCount | filterDate}}</div>
  </div>  
</template>

<script>
export default {
  data(){
    return {
      filterCount:1500
    }
  },
}
</script>

Vue过滤器(filter)实现及应用场景详解

4. 常见使用场景

4.1 格式日期(时间)

场景一:后端传的时间:2019-11-19T04:32:46Z

安装moment.js

// main.js

import moment from 'moment'
// 定义全局过滤器--时间格式化
Vue.filter('format',function(val,arg){
  if(!val) return;
  val = val.toString()
  return moment(val).format(arg)
})
// test.vue

<template>
   <div class="filter">{{time | format('YYYY-MM-DD HH:MM:SS')}}</div>  
</template>

<script>
export default {
  data(){
    return {
      time:'2019-11-19T04:32:46Z'
    }
  }
}
</script>

Vue过滤器(filter)实现及应用场景详解

总结

到此这篇关于Vue过滤器(filter)实现及应用场景的文章就介绍到这了,更多相关Vue过滤器(filter)实现应用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 #Vue.js
Vue中插槽slot的使用方法与应用场景详析
vue+elementui 实现新增和修改共用一个弹框的完整代码
解决vue $http的get和post请求跨域问题
vue Element-ui表格实现树形结构表格
Jun 07 #Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 #Vue.js
You might like
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
Vue中使用Sortable的示例代码
2018/04/07 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
vue vant Area组件使用详解
2019/12/09 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
python 循环while和for in简单实例
2016/08/16 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
如何使用Python 打印各种三角形
2019/06/28 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
军人违纪检讨书
2014/02/04 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
python数字转对应中文的方法总结
2021/08/02 Python
Vue h函数的使用详解
2022/02/18 Vue.js