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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
浅谈Vue的computed计算属性
Mar 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
DedeCms模板安装/制作概述
2007/03/11 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
2016/08/09 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
python求素数示例分享
2014/02/16 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
python Flask实现restful api service
2017/12/04 Python
对python Tkinter Text的用法详解
2018/10/11 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
golang/python实现归并排序实例代码
2020/08/30 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
python 模拟登录B站的示例代码
2020/12/15 Python
学生会竞选自荐信
2013/10/12 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
中秋联欢会主持词
2015/07/04 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
JavaScript实例 ODO List分析
2022/01/22 Javascript