vue中filters选项的用法

vue中filters选项的用法

filters是.vue文件中export对象中的一个选项，其类型是Object，即包含Vue实例可用过滤器的哈希表。

下面讲讲filters选项的用法

1、html如下

<div id="app">
  {{message | filters2| filters3(true,priceCount)}}
</div>

2、js如下

var app = new Vue({
  el: "#app",
  data: {
    message: 199,
    priceCount:0.8
  },
  filters:{
    filters2:function (arg) {
      console.log("arg:"+arg)
      if(arg>100){
        return arg-8;
      }else {
        return arg;
      }
    },
    filters3:function (arg_1,arg_2,arg_3) {
      var result;
      console.log("arg_1:"+arg_1)
      console.log("arg_2:"+arg_2)
      console.log("arg_3:"+arg_3)
      if(arg_2){
        result = arg_1*arg_3;
        console.log("result"+result);
        return result;
      }else{
        result =arg_1;
        console.log("result"+result);
        return result
      }
 
    }
  }
});

3、控制台的输出

helloVue.js:17 arg:199
helloVue.js:26 arg_1:191
helloVue.js:27 arg_2:true
helloVue.js:28 arg_3:0.8
helloVue.js:35 result152.8

4、分析

首先，在data里面定义两个变量message:199，priceCount:0.8,

然后，在.vue文件中的<script>里面的filters选项里面定义两个函数filters2(arg)和filters3(arg_1,arg_2,arg_3)

最后，在.vue文件里面的<template>中调用filters中定义的函数，如下所示：

<div id="app">
  {{message | filters2| filters3(true,priceCount)}}
</div>

{{}}里面第一个变量message是在data里面定义的变量，message作为filters2函数的参数，然后filters2函数的返回值result作为filter3函数的第一个参数，即filters3(result,true,priceCount)，所以得到上述控制台的输出

转载地址：点击打开链接