vuejs过滤器
结合管道符 |
{{messageOne | capitalize}} capitalize 首字母大写
{{messageOne | uppercase}} uppercase 大写字母
{{messageTwo | currency '¥' 0}} currency 货币联合符 后面的0 是说小数点后面显示几个0 写3就跟着三个0
{{messageThree}} {{messageThree | pluralize "one" "two" "three" "four"}}
pluralize 返回数组中结构的一部分 构造器根据数字来寻值 下表是从1开始
<input v-model="messageFour" debounce="1000" />
debounce 之前是管道符 现在vue2.0作为一盒属性来使用,作用是可以防止反复的刷新
现在是一秒同步一次(延迟数据双向绑定),默认是200毫秒
filter自定义过滤器
Vue.filter('my-f',{
read:function(value){
return "¥"+value
},
write:function(value){
return parseInt(value)
}
});
<li v-for="intem of intems |filterBy xianshi | limitBy 10 "message" "tmp" ">{{intem.message}}</li>
tmp 是方便查找的标签更大化 你比如你输入作者他写的书很多,就可以通过这样找他的书
<li v-for="intem of intems|orderBy 'message' -1">
{{intem.message}}
</li>
orderBy "字面量" 排序
<li v-for="intem of intems | limitBy 10 3">{{intem.message}}</li>
limitBy管道符 后面跟着的数就是显示的个数 第二个数字是从这个数字开始往下显示第一个数字的个数
vuejs过滤器的更多相关文章
- 如何使用vuejs过滤器
大家再使用vue做项目时,查询功能当然必不可少,这就得使用vue强大的filter啦.其实vue内置的两个属性filterBy和orderBy已经能满足部分需求了,但是她更大的的魅力在于自定义filt ...
- VueJS学习资料大全
参考:http://www.worktle.com/articles/2467/ 文档&社区 Vue.js官方网站(中文) :http://cn.vuejs.org/ Vue论坛:http:/ ...
- Vue开源项目库汇总
最近做了一个Vue开源项目库汇总,里面集合了OpenDigg 上的优质的Vue开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 elem ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- Vue常用开源项目汇总
前言:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
- vue各种插件汇总
https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...
- VUE插件大总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- Vue相关开源项目库汇总
https://github.com/opendigg/awesome-github-vue http://www.opendigg.com/tags/front-vue README.md 内容 U ...
随机推荐
- 如何解决div层被flash遮盖的问题
页面构建中的Flash层会遮挡Div的问题,一般通过设置wmode="transparent" 或wmode="window"就可以解决.不过对于Flash视频 ...
- CSS 去掉inline-block元素间隙的几种方法
最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...
- ASP.NET版CKEditor与CKFinder的配置使用
ASP.NET版 CKEditor与CKFinder的配置使用 将CKEditor 与 CKFinder 的包含在项目中,并添加程序集的引用 从http://cksource.com网站上下载CKEd ...
- 导出你的GAC Assembly中的DLLS -- 金大昊(jindahao)
导出你的GAC Assembly中的DLLS 方法1: CMD命令中,进入C:\windows\assembly,然后XCOPY GAC_MSIL c:\temp /E 这样就得到了dlls了,以 ...
- Effective Java 阅读笔记——方法
38:检查参数的有效性 每当编写方法或者构造器的时候,应该考虑它的参数有哪些限制,在方法的开头处对参数进行检查,并且把这些限制写入文档. 注意: 对于公有方法,应该使用@throws标签在文档中说明违 ...
- 在Android开发中使用Ant 二:进行一次完整的打包
一次完整的Android打包要进行以下的几步:编译.代码混淆.打包apk.签名apk.apk优化. 为了能包涵使用NDK的情况,在这里使用一个有native代码的工程TestJni. 在工程根目录下新 ...
- CocoaPod出现-bash: pod: command not found 解决办法
从过年来到公司 就不用自己电脑了 之前一直自己带电脑 昨天随便建了一个demo 使用cocoapods 发现 -bash: pod: command not found 刚开 ...
- 全球最低功耗蓝牙单芯片DA14580的软件体系 -RW内核和消息处理机制
上一篇文章<蓝牙单芯片DA14580的硬件架构和低功耗>阐述了DA14580的硬件架构和低功耗的工作原理.本文文章阐述该平台的软件体系,并着重分析消息事件的处理机制. 一.DA14580S ...
- Jmeter组件执行顺序与作用域
一.Jmeter重要组件: 1)配置元件---Config Element: 用于初始化默认值和变量,以便后续采样器使用.配置元件大其作用域的初始阶段处理,配置元件仅对其所在的测试树分支有效,如,在同 ...
- Linux与Windows共享文件夹之samba的安装与使用(Ubuntu为例)
1.写在前面 当你在Windows上安装了一台Linux的虚拟机,你想访问Linux中的文件夹,将虚拟机中的文件复制到Windows主机上,你会怎么做呢?如果这台Linux主机不是虚拟机,而是 ...