国瑞个人博客
首页 > 前端 > Vue.js的过滤器基本使用

Vue.js的过滤器基本使用

Vue.js的过滤器基本使用

 2019年03月01日 作者: 国瑞个人博客 576次浏览

什么是过滤器?我们又怎么去使用它?本文我们就来一探究竟!

过滤器的介绍

1、在Vue中使用过滤器(Filters)来渲染数据是一种很有趣的方式。

2、首先我们要知道,Vue中的过滤器不能替代Vue中的methods、computed或者watch,但有时候他们都可以达到同样的目的

3、过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。

4、在很多不同的情况下,过滤器都是有用的,比如尽可能保持API响应的干净,并在前端处理数据的格式。

5、在你希望避免重复和连接的情况下,它们也可以有效地封装成可重用代码块背后的所有逻辑。

6、在Vue 2.0中已经没有内置的过滤器了,我们可以自定义过滤器。2.0之前有。在这里有一个旧的内置过滤器的

定义和使用过滤器

1.全局和本地过滤器:你可以跨所有组件访问全局过滤器,而本地过滤器只允许你在其定义的组件内部使用

一:编辑过滤器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * 给商品价格加补0
 * @param {*} value
 */

const addZero=function(value){
    var value=Math.round(parseFloat(value)*100)/100;
    var xsd=value.toString().split(".");
    if(xsd.length==1){
        value=value.toString()+".00";
        return value;
    }
    if(xsd.length>1){
        if(xsd[1].length<2){
            value=value.toString()+"0";
        }
        return value;
    }
}
export default {
    addZero
}
二,在入口文件中引入这个filter文件 (路径以你自己的为准)

import filters from '../../../static/filter/filter';

三,在入口文件中全局注册filter
1
2
3
4
//过滤器统一处理加载
Object.keys(filters).forEach(key => {  
  Vue.filter(key, filters[key])  
})
组件中使用
1
{{content | addZero}}

本地过滤器

本地过滤器被注册到一个Vue组件中。下面这个示例展示了本地过滤器是如何创建的。这个过滤器的功能是将字母变成大写,本地过滤器存储在Vue组件中,作过filters属性中的函数。这个时候你想注册多少个就能注册多少个:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let app = new Vue({
  el: '#app',
  data () {
    return {
      name: 'w3cplus.com'
    }
  },
  // 声明一个本地的过滤器
  filters: {
    Upper: function (value) {
      return value.toUpperCase()
    }
  }
})
<div id="app"> <h1>{{ name | Upper }}</h1> </div>

过滤器串连、传参

关于过滤器,我最喜欢的一件事是能够使用管道(|)符号对它们进行串连,并通过一系列过滤器转换一个值。让我们再看一个价格的例子,并让这个价格只保留两位小数,然后加上美元符号。虽然我们可以使用一个单独的过滤器来实现它,但我们也可能想要使用toUSD过滤器。在这种情况下,分离和串连过滤器是一处方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Vue.filter('toFixed', function (price, limit) {
     return price.toFixed(limit)
 })
Vue.filter('toUSD', function (price){
     return `$${price}`
})
let app = new Vue({
    el: '#app',
    data () {
        return {
            price: 435.333
        }
    }
})
<div id="app">
    <h1>
        {{ price | toFixed(2) | toUSD }}
    </h1>
</div>

传参数时候,过滤器第一位默认是value,也就是说形参第二位才是接收参数。当然,过滤器它的功能仅仅不像文章中的这么简单,他可以做任何你想做的事情。如果你对Vue其他的自定义过滤器功能感兴趣的话,可以阅读@wy-ei在Github上创建的

本文转载自:

百度已收录

点击快速分享:

以上就是国瑞前端个人博客带来的是《Vue.js的过滤器基本使用》,感谢您的观看!

如果没有特殊的说明,本文即为国瑞前端博客原创(www.huanggr.cn),欢迎读者转载并保留本站版权!https://www.huanggr.cn/1346.html

「专业前端博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 12 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
12

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

相关文章:

共有 0 条评论

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

本站唯一QQ群

加入国瑞个人博客QQ群

本群为学习探讨群,主要和前端相关,欢迎广大前端(抱有学习目的均可)爱好者加入!广告请勿添加!

升级版本

web前端开发博客,基于vue脚手架制作的前端博客正在制作中,尽情期待,目前示例的代码位于此处

最新版本(尽请期待)-web前端开发博客

精彩评论

本站主要提供服务

二年web前端开发博客,本站专注提供web资源下载,技术问题解答,经验分享,也提供新手的web技术指导,二年前端个人博客,期待你的加入!

站点统计

  • 文章总数: 269 篇
  • 草稿数目: 50 篇
  • 分类数目: 26 个
  • 页面总数: 16 个
  • 评论总数: 223 条
  • 链接总数: 10 个
  • 标签总数: 104 个
  • 建站时间: 808 天
  • 注册用户: 659 人
  • 访问总量: 8785213 次
  • 最近更新: 2019年7月15日
-->