Ｖｕｅ－过滤器的使用

ｖｕｅ的过滤选择器fｉｌｔｅｒｓ与ｄａｔａ同级，使用的时候要注意以下

过滤选择器是对插值选择器里的值进行改动，并返回给插值选择器，现在用到不多

过滤器基本使用

<div id="app"><p>message的值是：{{message|capi}}</p>　
</div>

const vm = new Vue({el:'#app',data:{message:'hello world'} ,filters:{//注意：过滤器函数，必须定义奥filters节点之下//过滤器中的形参的val,永远是“管道符”前面的那个值capi(val){//字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对于的字符获取出来const first = val.charAt(0).toUpperCase();//字符串的slice方法可以截取字符串，从指定索引向后截const other=val.slice(1)// console.log(first);//强调，过滤器中一定要有一个返回值return first+other;}}
})

过滤器包括私有过滤器和全局过滤器，一般采用就近原则，即当二者都存在时，起作用的是私有过滤器

１.私有过滤器的使用方法

const vm = new Vue({el:'#app',data:{message:'hello world'} ,//以下的过滤器是私有过滤器，当它与全局过滤器的名称一样时，私有过滤器更厉害一点filters:{//注意：过滤器函数，必须定义奥filters节点之下//过滤器中的形参的val,永远是“管道符”前面的那个值capi(val){//字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对于的字符获取出来const first = val.charAt(0).toUpperCase();//字符串的slice方法可以截取字符串，从指定索引向后截const other=val.slice(1)// console.log(first);//强调，过滤器中一定要有一个返回值return first+other;}}
})

２.全局过滤器的使用方法

ript>//全局过滤器Vue.filter('capi',function(str){//Vue.filter('filterA',(msg,arg1,arg2))   第一个参数永远都是管道符前面处理的值//第二个参数开始，才是调用过滤器传递过来的参数const first = str.charAt(0).toUpperCase();//字符串的slice方法可以截取字符串，从指定索引向后截const other=str.slice(1)// console.log(first);//强调，过滤器中一定要有一个返回值return first+other+'-----';})

Ｖｕｅ－过滤器的使用相关推荐

vue 过滤器的使用（解决forEach遇到的问题）
vue 过滤器的使用(解决forEach遇到的问题) 参考文章: (1)vue 过滤器的使用(解决forEach遇到的问题) (2)https://www.cnblogs.com/hellosxs/p ...
vue 过滤器格式时间秒数，js 时间日期格式化
vue过滤器将总秒数转化为 00:00:00 Vue.filter('filterTime',function (value) {let t;if(value > -1){let hour = ...
Vue过滤器的简单使用--实时显示格式化的时间
Vue的过滤器的使用是在{{}}插值的尾部添加一个管道符 | 过滤的规则是自己定义的,通过给Vue实例添加选项filters来设置通过过滤器对时间进行格式化从而实时显示时间 <!doctyp ...
web前端技巧分享：vue过滤器的那点事！
关于vue的过滤器,其实在vue1.0的时候是内置了过滤器的,但是自从到了2.0之后就被去掉了,但是我们可能还会使用到,所以就需要自己定义过滤器了,下面小千就带你了解一下如何定义过滤器和过滤器都有哪些 ...
带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
vue过滤器的那点事
关于vue的过滤器,其实在vue1.0的时候是内置了过滤器的,但是自从到了2.0之后就被去掉了,但是我们可能还会使用到,所以就需要自己定义过滤器了,下面小千就带你了解一下如何定义过滤器和过滤器都有哪些 ...
vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
vue 过滤器做字数限制并显示省略号
//vue 过滤器做字数限制并显示省略号{{value | ellipsis(15)}} Vue.filter('ellipsis', (value, num) => {const nums = ...
Vue过滤器：第二天
Vue过滤器简介 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器分为全局过滤器和私有过滤器. 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0 ...
Vue 过滤器、计算属性、侦听器图解版一目了然
文章目录本篇学习目标 1. vue基础 1.0_vue基础 v-for更新监测 1.1_vue基础_v-for就地更新 1.2_vue基础_虚拟dom 1.3_vue基础_diff算法情况1: 根 ...

Ｖｕｅ－过滤器的使用

ｖｕｅ的过滤选择器fｉｌｔｅｒｓ与ｄａｔａ同级，使用的时候要注意以下

Ｖｕｅ－过滤器的使用相关推荐

最新文章

热门文章