Vue.js学习之过滤器详解

前言

在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。阅读这这篇文中的前提是你对Vue已经有了基本的语法基础。

Vue.Js中的过滤器基础

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 “ | ”, 比如:

{{ msg | capitalize }}
// 'abc' => 'ABC'

uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器。

VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤。接下来,我们可以想象一个比较简单的例子,使用了Vue的 filterBy + orderBy 过滤器来过滤所有商品products。过滤出来的产品是属于水果类商品。

filterBy过滤器 : 过滤器的值必须是一个数组,filterBy + 过滤条件。过滤条件是:'string || function'+ in 'optionKeyName'

orderBy过滤器 : 过滤器的值必须是一个数组,orderBy + 过滤条件。过滤条件是:'string || array ||function' + 'order ≥ 0 为升序 || order < 0 为降序'

接下来,我们可以看下下面这个例子:我们有一个商品数组products,我们希望遍历这个数组,并把他们打印成一张清单,这个用v-for很容易实现。

<ul class="product">
 <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 1">
 {{product.name}}-{{product.price | currency}}
 </li>
</ul>

上面的例子,就是用filterBy 过滤在 'category'中含有'水果' 关键字的列表,返回的列表就是只含有 '水果' 关键字的列表,而orderBy过滤器是根据价格做了一个升序,如果想要降序,只需要加一个小于0的参数;

自定义过滤器

虽然VueJs给我们提供了很多强有力的过滤器,但有时候还是不够。值得庆幸的,Vue给我们提供了一个干净简洁的方式来定义我们自己的过滤器,之后我们就可以利用管道 “ | ” 来完成过滤。

定义一个全局的自定义过滤器,需要使用Vue.filter()构造器。这个构造器需要两个参数。

Vue.filter() Constructor Parameters:

1.filterId: 过滤器ID,用来做为你的过滤器的唯一标识;

2.filter function: 过滤器函数,用一个function来接收一个参数,之后再将接收到的参数格式化为想要的数据结果。

上面的例子中,我们要实现商品价格打5折该怎么做呢?其实就是实现的一个自定义的过滤器,表示将商品的价格打了5折;而要实现它,需要完成的是:

a、使用Vue.filter()构造器创建一个过滤器叫做discount

b、输入商品的原价,能够返回其打五折之后的折扣价

代码见下面:

Vue.filter('discount', function(value) {
 return value * .5;
});
var product = new Vue({
 el: '.product',
 data: {
 products: [
  {name: '苹果',price: 25,category: "水果"},
  {name: '香蕉',price: 15,category: "水果"},
  {name: '雪梨',price: 65,category: "水果"},
  {name: '宝马',price: 2500,category: "汽车"},
  {name: '奔驰',price: 10025,category: "汽车"},
  {name: '柑橘',price: 15,category: "水果"},
  {name: '奥迪',price: 25,category: "汽车"}
 ]
 },
})

现在就可以像使用Vue自带的过滤器一样使用自定义过滤器了

<ul class="product">
 <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
 {{product.name}}-{{product.price|discount | currency}}
 </li>
</ul>

上面代码实现的商品打5折,而如果要实现价格打任意折扣呢?应该在discount过滤器里增加一个折扣数值参数,改造一下我们的过滤器。

Vue.filter('discount', function(value, discount) {
 return value * (discount / 100);
});

然后重新调用我们的过滤器

<ul class="product">
 <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
 {{product.name}}-{{product.price|discount 25 | currency}}
 </li>
</ul>

我们也可以在我们Vue实例里构造我们的过滤器,这样构造的好处是,这样就不会影响到其他不需要用到这个过滤器的Vue实例。

/*定义在全局
Vue.filter('discount', function(value,discount) {
 return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
 el: '.product',
 data: {
 products: [
  {name: '苹果',price: 25,category: "水果"},
  {name: '香蕉',price: 15,category: "水果"},
  {name: '雪梨',price: 65,category: "水果"},
  {name: '宝马',price: 2500,category: "汽车"},
  {name: '奔驰',price: 10025,category: "汽车"},
  {name: '柑橘',price: 15,category: "水果"},
  {name: '奥迪',price: 25,category: "汽车"}
 ]
 },
 //自定义在实例
 filters: {
 discount: function(value, discount) {
  return value * (discount / 100);
 }
 }
})

定义在全局就能在所有的实例中调用过滤器,如果定义在了实例里就在实例里调用过滤器。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用vue能带来一定的帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • Vue.js -- 过滤器使用总结

    过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,过滤器通常会使用管道标志 " | ", 比如: {{ msg | capitalize }} // 'abc' => 'ABC' uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器. VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤.接下来,我们可以想象一个比较简单的例子,使用了Vue的 filterBy +

  • vue货币过滤器的实现方法

    自定义事件也可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定. 所以要让组件的 v-model 生效,它必须: 接受一个 value 属性 在有新的 value 时触发 input 事件 代码如下: HTML: <div id="app"> <p>{{ message }}</p> <currency-input label="Price" v-model="price">

  • 详解Vue2.0里过滤器容易踩到的坑

    vue2.0里,不再有自带的过滤器,需要自己定义过滤器.定义的方法如下: 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数. Vue.filter('filtername',function(value,参数){ return 参数+value.split('').reverse().join(''); }); function里第一个参数value默认为使用这个过滤器的data对象内的值,在本例中是msg的值'you are mine'. 坑1:第一个参数必须为自身的值,后面可

  • Vue filters过滤器的使用方法

    本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下 实例 先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters

  • Vue.js每天必学之过滤器与自定义过滤器

    基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&

  • Vue过滤器的用法和自定义过滤器使用

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器 过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. 自定义过滤器的例子: <!DO

  • vue自定义过滤器创建和使用方法详解

    本文实例为大家分享了vue自定义过滤器创建和使用方法,供大家参考,具体内容如下 过滤器:生活中有很多例子,净水器 空气净化器 . 过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的数据 } } }) 2.过滤器使用 语法: <any

  • 详解Vue自定义过滤器的实现

    一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也可以先处理 <!DOCTYPE html> <html> <head> <meta charset=&qu

  • Vue实现自带的过滤器实例

    一 过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> <meta name="viewport" content="width=device-width,i

  • vue2.0 自定义日期时间过滤器

    方法一: // template {{a | data}} //script data:{ a: Date.now() } filters: { data:function (input) { var d = new Date(input); var year = d.getFullYear(); var month = d.getMonth() + 1; var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate(); var

随机推荐