vue之filter用法
1、全局写法:
全局过滤器必须写在vue实例创建之前。
Vue.filter('testfilter', function (value,text) {
// 返回处理后的值
return value+text
})
2、局部写法:
在组件实例对象里挂载。
filters: {
changemsg:(val,text)=>{
return val + text
}
},
3、使用:
只能使用在{{}}和:v-bind中,定义时第一个参数固定为预处理的数,后面的数为调用时传入的参数,调用时参数第一个对应定义时第二个参数,依次往后类推
<h3 :title="test|changemsg(1234)">{{test|changemsg(4567)}}</h3>
//多个过滤器也可以串行使用
<h2>{{name|filter1|filter2|filter3}}</h2>
4、vue-cli项目中注册多个全局过滤器写法:
//1.创建一个单独的文件定义并暴露函数对象
const filter1 = function (val) {
return val + '--1'
}
const filter2 = function (val) {
return val + '--2'
}
const filter3 = function (val) {
return val + '--3'
} export default {
filter1,
filter2,
filter3
} //2.导入main.js(在vue实例之前)
import filters from './filter/filter.js' //3.循环注册过滤器
Object.keys(filters).forEach(key=>{
Vue.filter(key,filters[key])
})
vue之filter用法的更多相关文章
- vue的filter用法,检索内容
var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", &quo ...
- python3 filter用法(举例求0~n之间的素数)
在用python3求0~n之间的素数时,关于filter用法的有点模糊,于是上网查了一下filter用法. 求0~n之间素数的脚本prime.py: def f(x): plist = [0,0] + ...
- Ext.Net学习笔记12:Ext.Net GridPanel Filter用法
Ext.Net学习笔记12:Ext.Net GridPanel Filter用法 Ext.Net GridPanel的用法在上一篇中已经介绍过,这篇笔记讲介绍Filter的用法. Filter是用来过 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
- checkbox在vue中的用法总结
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
- 024——VUE中filter的使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法
Django 资源 与 知识 Django中自建脚本并使用Django环境 model中的save()方法说明 filter()用法 2018/11/06 Chenxin 资料说明 Django基础入 ...
- Vue slot 插槽用法:自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
随机推荐
- 在MyEclipse里连接Tomcat部署到项目(maven项目和web项目都适用)
前提, Tomcat *的下载(绿色版和安装版都适用) Tomcat *的安装和运行(绿色版和安装版都适用) Tomcat的配置文件详解 在Eclipse里连接Tomcat部署到项目(maven项目和 ...
- Linux命令locate
centos安装locate命令 centos6.3刚初始化安装完毕,有个配置文件不知道存在什么地方,想用locate命令来查找下,发现系统提示,找不到该命令.以前经常用的命令为什么找不到了呢???原 ...
- js小知识 delete操作符
说明:delete操作符用于删除对象的某个属性. 语法: delete object.property //删除 对象.属性 delete object['property'] //删除 对象['属性 ...
- Sed Awk 日常使用总结
Sed命令语法sed [option] {sed-commands}{input-file}sed首先从input-file中读取第一行,然后执行所有的sed-commands:再读取第二行,执行所有 ...
- WCF客户端获取服务端异常[自定义异常]
引言 经过不断的摸索,询问/调试,终于学会了关于WCF客户端与服务端之间异常的处理机制,在此来记录自己的成果,用于记录与分享给需要的伙伴们. 首先感谢[.NET技术群]里群主[轩]的大力帮助,如有需要 ...
- 比较排序算法(PHP)
冒泡排序 两两比较相邻记录的关键字,如果反序则交换,大的数字往下沉,一直到最大的出现在数组最后 function swap(&$x, &$y) { $temp = $x; $x = $ ...
- Spring学习总结(14)——Spring10种常见异常解决方法
在程序员生涯当中,提到最多的应该就是SSH三大框架了.作为第一大框架的Spring框架,我们经常使用. 然而在使用过程中,遇到过很多的常见异常,我在这里总结一下,大家共勉. 一.找不到配置文件的异常 ...
- 洛谷 P2665 [USACO08FEB]连线游戏Game of Lines
P2665 [USACO08FEB]连线游戏Game of Lines 题目背景 Farmer John最近发明了一个游戏,来考验自命不凡的贝茜. 题目描述 Farmer John has chall ...
- js 判断是否滚动到底部
$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置 ...
- hadoop-13-root ssh无密码登陆
hadoop-13-root ssh无密码登陆 生产机器禁止ROOT远程SSH登录: vi /etc/ssh/sshd_config 把 PermitRootLogin yes 改为 PermitRo ...