Vue--过滤器
来源:互联网 发布:差分和微分的区别 知乎 编辑:程序博客网 时间:2024/06/09 20:34
vue – 过滤器
一、Vue提供的过滤器
vue本身提供了很多便利的过滤器,这里列举一下,具体的可以参考官方文档过滤器。
例子中使用到的data和methods
data:{ message: 'hello world', money: 12345, num: [1,2,3,4,5], obj: { name: 'Linda', age: 39, sex: 'male' }, arr:[{ name: 'lily', age: 23 },{ name: 'lisa', age: 24 },{ name: 'linda', age: 25 },{ name: 'tom', age: 26 },{ name: 'susie', age: 21 }] }, //用于测试debounce的控制器 methods: { fade: function(){ document.getElementById('btn-fade').style.display = 'none'; } },
示例和运行结果截图
json:输出经
JSON.stringify()
处理后的结果<div class="item"> <p> <strong>格式化json</strong> </p> {{ obj | json }}</div>
若不使用json过滤器,则结果如下图,这应该并不是我们想要的。
capitalize:首字母大写
<div class="item"> <p> <strong>capitalize首字母大写:</strong> </p> {{ message | capitalize }}</div>
uppercase:转化为大写表示
<div class="item"> <p> <strong>uppercase转换为大写表示:</strong> </p> {{ message | uppercase }}</div>
lowercase:转化为小写表示
<div class="item"> <p> <strong>lowercase转换为小写表示:</strong> </p> {{ 'HELLO WORLD' | lowercase }}</div>
currency: 格式化货币表示
<div class="item"> <p> <strong>currency输出货币表示第一个参数表示货币符号(默认为$),第二个参数是要保留的小数位数(默认为两位)</strong>: </p> {{ money | currency '£' 1 }}</div>
pluralize: 给值添加后缀
<div class="item"> <p> <strong>pluralize如果只有一个参数,复数形式只是简单地在末尾添加一个 “s”。如果有多个参数,参数被当作一个字符串数组,对应一个、两个、三个…复数词。 如果值的个数多于参数的个数,多出的使用最后一个参数</strong> </p> <ul v-for="item in num"> <li> {{ item }}{{ item | pluralize 'st' 'nd' 'rd' 'th' }} </li> </ul></div>
debounce: 延迟执行处理器
<div class="item"> <p> <strong>debounce包装处理器,让它延迟执行x秒,默认延迟300ms:</strong> <button id="btn-fade" @click="fade | debounce 3000">点击我,我将在3s后消失</button> </p></div>
limitBy: 输出数组中从偏移量位置(1)开始,一共4个元素
<div class="item"> <p> <strong>limitBy输出数组中从偏移量位置(num2)开始,一共num1个元素:</strong> <span v-for="item in num | limitBy 4 1">{{ item }},</span> </p></div>
filterBy: 输出指定字符索引的值
<div class="item"> <p> <strong>输出arr中包含字母'l'的name</strong> </p> <ul v-for="item in arr | filterBy 'l' in 'name' "> <li>{{ item.name }}</li> </ul> </div>
orderBy: 对给定的数组中的元素进行排序
<div class="item"> <p> <strong>通过年龄大小进行排序,默认升序.第二个参数的值>0(升序),<0(降序)</strong> </p> <ul v-for="item in arr | orderBy 'age' 1"> <li>{{ item.name }}</li> </ul></div>
二、自定义过滤器
JS部分
//自定义过滤器 filters: { reverse: function(value){ return value.split('').reverse().join('') } }
Html部分
<div class="item"> <p> <strong>过滤器的本质就是一个函数</strong> <p>{{message | reverse}}</p> </p> </div>
阅读全文
0 0
- Vue--过滤器
- Vue 过滤器
- vue过滤器
- vue过滤器
- vue--过滤器
- vue-过滤器
- Vue--过滤器
- Vue过滤器和自定义过滤器
- Vue.js过滤器概述
- Vue.js -- 过滤器
- vue.js 过滤器
- vue过滤器使用
- Vue.js过滤器学习
- vue实现货币过滤器
- Vue自定义过滤器
- Vue自定义过滤器
- Vue.js 过滤器
- vue常用过滤器
- codeforces 863A 之 Quasi-palindrome
- 2.运算符.流程控制
- java.io.FileNotFoundException
- 机器学习笔记七
- 手误删了照片不用怕!手把手教你恢复手机删除的照片
- Vue--过滤器
- 迅雷创始人程浩:AI 创业必知 6 大核心问题:如何选择赛道、搭配团队和应对巨头挑战
- Introduction to HP ProCurve 2910al Switch Series
- Python 文件管理器,Treeview,Scrollbar,
- spring配置websocket并实现群发/单独发送消息
- 运营商MCC,MNC大全
- gulp构建项目之引入zeptojs
- 钱仓 最大字段和+贪心+模拟
- mysql中替代oracle中nvl()函数的ifnull()函数