首页 编程与技术
这里有新鲜出炉的 vue.js 教程, 程序狗速度看过来!
Vue.js 轻量级 JavaScript 框架
Vue.js 是构建 Web 界面的 JavaScript 库, 提供数据驱动的组件, 还有简单灵活的 API, 使得 MVVM 更简单
vue 的过滤器通常用在一些常见的文本格式化, 过滤器可以用在两个地方: 双花括号插值和 v-bind 表达式本文给大家介绍了 web 前端 vue filter 过滤器的相关知识, 感兴趣的朋友一起看看吧
vue 的过滤器通常用在一些常见的文本格式化, 过滤器可以用在两个地方: 双花括号插值和 v-bind 表达式
比如给价格自动加上中文的钱的字符或者是给一个时间段或 (时间戳) 相互之间的转换过滤
在 javascript 和 jquery 的年代! 时间段的显示或者是提交, 都是要在显示的时候要转换下或者提交的时候转换下, 这样就有点繁琐了(个人用了 vue 后的感觉繁琐了)
不多说直接看例子如下:
filter 定义的过滤器可以局部, 可以全局的下面就直接说全局的
老样子还是等先注册一个全局的过滤器关键字(filter)
全局的注册过滤器是在 main.js 这个文件里, 当然也可以单独的一个 js 文件里
- Vue.filter('dateconversion', function (value) { // 一个时间戳转正常的过滤器
- let date = new Date(value) // nuw 一个时间
- let getHours // 小时
- let getMinutes // 分
- if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
- // 判断小时是否小于 10 的补全: 加 0
- if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
- // 判断分是否小于 10 的补全: 加 0
- return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+""+ getHours +":"+ getMinutes // 返回转换后的值
- })
使用起来很方便的, 可以在各个组件里凡事有要转换显示时间的都可以用
- <template>
- {{date | dateconversion}} // 使用方式, 就是怎么简单, 整个项目随便用
- </template>
- <script>
- export default {
- data () {
- return {
- date: '' // 后台传来的时间戳
- }
- }
- }
- </script>
好了! 简单的介绍了过滤器使用方法和方式, 下一章我会讲稍微复杂点, 串联过滤器和带参数的过滤器
您可能感兴趣的文章:
Vue 过滤器 filters 及基本用法
Vue filters 过滤器的使用方法
vue 分类筛选 filter 方法简单实例
vuejs 通过 filterByorderBy 实现搜索筛选降序排序数据
Vue.js 报错 Failed to resolve filter 问题的解决方法
来源: http://www.phperz.com/article/18/0201/362681.html