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 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
随机推荐
- ie浏览器检测不到cookie的问题
之前做项目由于客户的要求设置缓存必须由后台来设置必须使用cookie(session是没问题的),后期设置时出现了登录页面与首页来还跳转的局面.原因就是首页没检测到登录后的缓存,而后台验证到确实已经是 ...
- 【学习】java下实现调用oracle的存储过程和函数
在oracle下创建一个test的账户,然后按一下步骤执行: 1.创建表:STOCK_PRICES --创建表格CREATETABLE STOCK_PRICES( RIC VARCHAR(6) PRI ...
- layui layer 弹框
layer 这个是一个web弹层组件,挺好用的...然后项目框架是SSM... layer.open主要是用来弹出来一个iframe弹窗,然后用来展示数据也行,用来修改也行,这次记录的主要是展示,展示 ...
- CSS3新增的属性有哪些:
CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. CSS3新增了很多的属性,下面一起来分析一下新增的一些属性: 1.CSS3边框: border-radius:CSS3圆角边框. ...
- React 第一天
第一天 从webpack到babel再到React.js Vue是如何实现组件化的: 通过.vue文件,来创建对应的组件: ·template 结构 ·script 行为 ·style 样式 Reac ...
- C语言传参的类型匹配
有一个这样的问题: 形参const char *p和实参char *c可以匹配 形参const char**p和实参char**c不可以匹配 注:argument和parameter:严格而言,par ...
- 紫书 例题8-12 UVa 12627 (找规律 + 递归)
紫书上有很明显的笔误, 公式写错了.g(k, i)的那个公式应该加上c(k-1)而不是c(k).如果加上c(k-1)那就是这一次 所有的红气球的数目, 肯定大于最下面i行的红气球数 我用的是f的公式, ...
- Linux入门基础二
1.查看用户 who参数 说明 -a 打印能打印的全部 -d 打印死掉的进程 -m 同am i,mom likes -q 打印当前登录用户数及用户 ...
- codevs1281 矩阵乘法 快速幂 !!!手写乘法取模!!! 练习struct的构造函数和成员函数
对于这道题目以及我的快速幂以及我的一节半晚自习我表示无力吐槽,, 首先矩阵乘法和快速幂没必要太多说吧,,嗯没必要,,我相信没必要,,实在做不出来写两个矩阵手推一下也就能理解矩阵的顺序了,要格外注意一些 ...
- centos7.x86_64搭建饥荒服务器
http://blog.ttionya.com/article-1233.html 在centos7下找不到 libcurl-gnutls.so.4,而且必须要安装32位的才行 yum install ...