简述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组件通信的过程中,我们通信的目的往往就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),进而更改状态.但可以看到如果我们通过最基本的方式来进行通信,一旦需 ...
随机推荐
- 基于numpy的绘图
import numpy as np #import matplotlib.pyplot as plt dataset = np.loadtxt('1.csv', delimiter=",& ...
- PHP常用采集函数总结
1.获取所有链接内容和地址 function getAllURL($code){ preg_match_all('/<as+href=["|']?([^>"']+)[& ...
- shell安装mysql,连接数据库,创建数据库
https://blog.csdn.net/yhflyl/article/details/83061126 https://blog.csdn.net/wyl9527/article/details/ ...
- java代码实现H5页面
public void getH5(HttpServletResponse response){ StringBuffer res=new StringBuffer(); res.append(&qu ...
- java:集合输出之Iterator和ListIterator二
java:集合输出之Iterator和ListIterator二 ListIterator是Iterator的子接口,Iterator的最大特点是,能向前,或向后迭代.如果现在要想双向输出的话,则只能 ...
- CSS3——制作正在加载页面loading...
今天做了好多小东西,还挺开心的~ <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- linux运维、架构之路-Kickstart无人值守
一.PXE介绍 PXE全名Pre-boot Execution Environment,预启动执行环境:通过网络接口启动计算机,不依赖本地存储设备或本地已安装的操作系统:Client ...
- 五年双十一:SLS数据管道发展之路
日志服务SLS是一款飞天团队自研产品,服务云上云下3W+客户,并在阿里经济体中作为日志数据的基础设施,在过去几年中经历多次双十一.双十二.新春红包锤炼.在2019双十一中: 服务阿里经济体3W+ 应用 ...
- 【bzoj2073】【[POI2004]PRZ】位运算枚举子集的特技
(上不了p站我要死了) Description 一只队伍在爬山时碰到了雪崩,他们在逃跑时遇到了一座桥,他们要尽快的过桥. 桥已经很旧了, 所以它不能承受太重的东西. 任何时候队伍在桥上的人都不能超过一 ...
- HDU-6709 Fishing Master
Description Heard that eom is a fishing MASTER, you want to acknowledge him as your mentor. As every ...