简述Vue中的过滤器
1、过滤器的基本概念
- 概念:本质上是函数;
- 作用:用户输入数据后,它能够进行处理,并返回一个数据结果;(无return语句不会报错,但是这种过滤器没有丝毫意义)
- 格式:管道符( | )进行连接,而管道符的作用就是:上一个命令的输出可以作为下一个命令的输入;
- 位置:只能是Mustache表达式、v-bind表达式;{{ msg | filterFuction }} <p v-bind:id="msg | filterFuction"></p>
- 强调:在过滤器函数中,表达式的值作为第一个参数、带引号的参数会被当做字符串处理、而不带引号的参数则会被当做属性名处理,过滤器可以接受参数,参数跟在过滤器名称的后面,参数之间以逗号分隔,例如:
{{ message | filterFunction('arg1',arg2)}}//过滤器函数中传入的参数以后面开始的参数来统计和赋值
2、过滤器种类
- 内置过滤器(Vue2.x之后没有内置过滤器,必须自己定义)
- capitalize:将表达式中的首字母转换为大写形式;
- uppercase:将表达式的所有字母转换为大写格式;
- lowercase:将表达式的所有字母转换为小写格式;
- json过滤器:相当于JSON.stringify();
- 限制:处理并返回过滤后的数组 处理对象:数组
- limitBy:第一个参数是显示数据的数量,第二个参数(可选)为开始显示的数组下标,默认为2;
- filterBy:(字符串|函数 in 过滤值);
- orderBy:返回排序后的数组,(字符串|数组|函数,排序方式(可选,大>=0升序,<0降序,默认为1));
- currency:将数字值转换为货币的形式输出(符号:默认$,小数位:默认为2);
- debounce过滤器:默认300ms
- 自定义过滤器
- 语法:Vue.filter(ID,function(){ })
- 步骤:
- 建立js文件
- 在app.js文件中引入
- 写filter函数
- 单个参数(以值为参数)
- 全局写法:
import Vue from 'vue'
Vue.filter('uppercase',function(value){
if(value){
return value.toUpperCase()
}
})使用:{{ data | uppercase}} data : 'wxh'
- 全局写法:
- 单个参数(以值为参数)
结果:WXH
局部写法:(只能在当前实例中使用)
<template>
<div id="example">{{ data | uppercase}}</div>
</template>
<script>
export default {
name: "example",
data() {
return {
data: "wxh"
};
},
filters: {
uppercase: function(value) {
if (value) {
return value.toUpperCase();
}
}
},
methods: {}
};
</script>使用与结果跟上边一样
- 多参数(参数之间用 “,” 分开)Vue1.x以空格分隔
- 写过滤器函数:
import Vue from 'vue'
Vue.filter('concat',function(value,prep,desc){
if(value){
return value + prep + desc
}
}) - 在组件中使用:
<template>
<div id="example">{{ data | concat('是一个',describe)}}</div>
</template>
<script>
export default {
name: "example",
data() {
return {
data: "wxh",
describe : "善良的小姑娘"
};
},
methods: {}
};
</script>结果:
- 写过滤器函数:
- 多参数(参数之间用 “,” 分开)Vue1.x以空格分隔
- 双向过滤器:(Vue1.x之后被废除,因此无法实现数据的双向绑定,而我们可以采用computed里面的getter与setter方法进行数据双向绑定,但是比较繁琐)
filters : {
doubleFilter : {//自定义 过滤器 以及 计算属性 形式差不多
//model--->view 将model数据输出到view层之前进行数据转化
read : function(value){ },
//view--->model 将视图的值在写会model前进行转化
write : function(newVal,oldVal){ }
}
}
- 双向过滤器:(Vue1.x之后被废除,因此无法实现数据的双向绑定,而我们可以采用computed里面的getter与setter方法进行数据双向绑定,但是比较繁琐)
3、过滤器的一个小型demo
- 进行数据的格式化,让数据按照我们的规定输出,例如:将日期转化为 2019-07-15 15:11:49
- 过滤器
import Vue from 'vue' Vue.filter('timeFormatter', function (value) {
if (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}
})使用:
<template>
<div id="example">
<p>过滤器:{{ time | timeFormatter}}</p>
</div>
</template>
<script>
export default {
name: "example",
data() {
return {
time : new Date().getTime()
};
},
methods: {}
};
</script>结果:过滤器:2019-07-15 15:13:50
- 在定时器 “ 补零 ” 方面,也可以采用es6的方法;
import Vue from 'vue' Vue.filter('timeFormatter', function (value) {
if (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM.toString().padStart(2,'0');//padStart为字符串的方法 为两位数,不足时在开头补零
let d = date.getDate();
d = d.toString().padStart();
let h = date.getHours();
h = h.toString().padStart();
let m = date.getMinutes();
m = m.toString().padStart();
let s = date.getSeconds();
s = s.toString().padStart();
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}
})
4、遇到的问题
无
简述Vue中的过滤器的更多相关文章
- 黑马vue---28、vue中全局过滤器的基本使用
黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...
- 简述vue中父子组件是怎样相互传递值的(基础向)
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
- 第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- 简述vue中v-if和v-show的区别
vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的 v-if v-if 控制元素显示或隐藏是把dom元素整个的渲染或者删除,如果删除,也就是页面中 ...
- Vue 中的过滤器的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中的过滤器
过滤器 过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应 ...
- Vue中全局过滤器期与局部过滤器期的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中,过滤器的使用方法!
Vue.js允许自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和v-bind表达式.过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示:(借官方的 ...
- 简述Vue中使用Vuex
1.为什么要用vuex 在vue组件通信的过程中,我们通信的目的往往就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),进而更改状态.但可以看到如果我们通过最基本的方式来进行通信,一旦需 ...
随机推荐
- N^2取N
序列合并 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2个和,求这N^2个和中最小的N个. 先把A B排序 然后pushA[1]+B[i](1<=i<=n)每次取出一 ...
- Codeforces 954 dijsktra 离散化矩阵快速幂DP 前缀和二分check
A B C D 给你一个联通图 给定S,T 要求你加一条边使得ST的最短距离不会减少 问你有多少种方法 因为N<=1000 所以N^2枚举边数 迪杰斯特拉两次 求出Sdis 和 Tdis 如果d ...
- 如何保证Redis与数据库的数据一致性
一般来说,只要你用到了缓存,不管是Redis还是memcache,就可能会涉及到数据库缓存与数据的一致性问题,这里我们以Redis为例. 我们该如何保证Redis与数据库的一致性呢? So easy: ...
- 第一次使用博客及Coursera课程体验
前言: 第一天的学习目标有三个 开设博客园账户 开设Github账号 进行第一次coursera课程学习:Internet History, Technology, and Security (网址 ...
- UE4从4.15移植到4.16
如果是旧版本的工程需要移植到4.16,有几个地方需要修改: 假设RC是工程名,修改如下(三个CS文件) 类似的,插件也需要这样修改
- 版本基线自动化之windows
1.背景: 目前项目维护周期过程中,制作调试版本和对外发布版本次数比较频繁,流程过于繁琐和随意,且打包制作人成为瓶颈,为了规范版本基线流程和实现全员自动化参与,拟定版本基线自动化方案. 2.目标: 版 ...
- android 文件读写工具类
将可以序列化的对象通过base64编码后进行保存 但是感觉多数情况下,不需要采用这个功能,直接保存原始的json字符串,取出来之后再进行解析即可 package com.wotlab.home.mon ...
- 一文读懂跨平台框架 Flutter 的搭建与运行
作者:个推iOS开发工程师 伊泽瑞尔 Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架. 之前我们为大 ...
- SpringBoot:初识SpringBoot
西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! 1.SpringBo ...
- 《SQL Server 2012 T-SQL基础》读书笔记 - 7.进阶查询
Chapter 7 Beyond the Fundamentals of Querying window function是什么呢?就是你SELECT出来一个结果集,然后对于每一行,你都想给它对应一个 ...