Vue过滤器(filter)

过滤器函数，必须被定义到 filter 节点之下

过滤器本质上是函数

语法：
<div id="app">
<p>{{message | capi}}</p>
</div>
<script>
//全局过滤器
//使用   Vue.filter()   定义全局过滤器
Vue.filter('capi',function(str){const first=str.charAt(0).toUpperCase();const other=str.slice(1);return first+other;})//私有过滤器var vm=new Vue({el:"#app",data:{message:"hello vue.js"   },filters:{//注意：过滤器函数形参中的val，永远都是"管道符"前面的那个值//强调:过滤器中，一定要有一个返回值capi(val){// 字符串有  charAt  方法，这个方法接收索引值，表示字符串中把索引对应的字符，获取出来const first=val.charAt(0).toUpperCase();// 字符串的 slice方法，可以截取字符串，从指定索引往后截取const other=val.slice(1);return first+other;}}})
</script>
过滤器的注意点：

要定义到filters节点下，本质是一个函数

在过滤器函数中，一定要有return值

在过滤器的形参中，就可以获取到"管道符"前面待处理的那个值

如果全局过滤器和私有过滤器名字一致，此时就按照"就近原则"，调用的是"私有过滤器"

Vue过滤器(filter)相关推荐

Vue过滤器-filter
Vue中的过滤器不能替代Vue中的methods.computed或者watch,因为过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本.在很多不同的情况下,过滤器都是有用的,比如尽 ...
Vue过滤器filter
1.是vue为开发者提供的功能,常用于文本的格式化 2,要用于文本的格式化,或者数组数据的过滤与排序等. 3,使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx ...
vue 过滤器filter（全面）
在官方文档中,是这样说明的:可被用于一些常见的文本格式化,vue中过滤器的作用可被用于一些常见的文本格式化.(也就是修饰文本,但是文本内容不会改变) 补充: 过滤器分全局过滤器和局部过滤器,下边我着重 ...
vue 过滤器 filter
<body><div id="app"><input type="text" v-model='msg'><div&g ...
vue过滤器filter中this指向问题
本人在项目中遇到一个情况,在对数据进行格式化时,定义了一个局部过滤器,但是在过滤器中使用this调用methods的方法时,报方法为undefined的错误,打印this,输出结果为undefined ...
momentjs转换格式_Moment.js+Vue过滤器的使用，各种时间格式转换为YYYY-MM-DD HH:mm:ss格式...
前言这篇文章将Moment.js与vue过滤器连用.如果不会过滤器的朋友,可以先看这篇文章vue过滤器一.Moment.js是什么? Moment.js是JavaScript 日期处理类库.使用场 ...
Vue过滤器属性filter
vue属性过滤器filter 一. 过滤器filter作用作用是转换格式, 把变量或者表达式转换出来 Vue中的过滤器场景全局定义字母都大写的过滤器字母转大写, 输入"hello&qu ...
vue+filter+html标签,vue过滤器用法实例分析
本文实例讲述了vue过滤器用法.分享给大家供大家参考,具体如下: 过滤器: vue提供过滤器: capitalize uppercase currency.... {{msg|currency ￥}} ...
如何在vue上全局使用过滤器filter
如何在vue上全局使用过滤器filter 在src下新建文件夹utils,创建filter.js文件 import Vue from 'vue'Vue.filter("publishdate ...

Vue过滤器(filter)

Vue过滤器(filter)相关推荐

最新文章

热门文章