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_3)

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

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







转载地址:点击打开链接

相关文章

https://segmentfault.com/a/1190000022018995 https://www....
ES6 (ECMAScript 6)中的模块是一个包含 JavaScript 代码的...
from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
D:\Temp&gt;npm init vite@latest vue3study --temp...
文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
文章浏览阅读3.3k次,点赞3次,收藏16次。静默打印是什么?简...