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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 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
杏林同学录(九)
2006/10/09 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
js实现拖拽效果
2015/02/12 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
React组件对子组件children进行加强的方法
2019/06/23 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
python中yaml配置文件模块的使用详解
2018/04/27 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
硕士生工作推荐信
2014/03/07 职场文书
文明礼仪标语
2014/06/13 职场文书
白莲教口号
2014/06/18 职场文书
资产运营委托书范本
2014/10/16 职场文书
稽核岗位职责
2015/02/10 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript