在Vue methods中调用filters里的过滤器实例


Posted in Javascript onAugust 30, 2018

需求:vue中,除了在模板中使用过滤器,有时候,methods中也需要使用filters中的过滤器,

网友hongz1125提出的解决办法:

this.$options.filters[filter](...args)  //这种方法很简单,也很实用

下面是我的方法,有点复杂。建议使用上面网友说的方法。

filters: {
    formatScore(score) {
      if (score < 20) {
        score = '不合格';
      } else if (score >= 20 && score <= 27) {
        score = '合格';
      } else if (score >= 28 && score <= 31) {
        score = '良好';
      } else if (score > 31) {
        score = '优秀';
      }
      return score
    }
  },
methods: {
  formatScore(score) {
    if (score < 20) {
      score = '不合格';
    } else if (score >= 20 && score <= 27) {
      score = '合格';
    } else if (score >= 28 && score <= 31) {
      score = '良好';
    } else if (score > 31) {
      score = '优秀';
    }
    return score
  },
  getPhysicalResult() {
    this.$http.get('/rc_ChildTest/testResult').then((res) => {
      this.isDisplayIcon = this.formatScore(score参数);//使用过滤器方法,需要单独写一个一模一样的方法。通过this调用
    })
  },
  },

解决方法:

1.建立一个公共的report.js文件,提取封装公共js

export default {
  formatScore(score) {
    if (score < 20) {
      score = '不合格';
    } else if (score >= 20 && score <= 27) {
      score = '合格';
    } else if (score >= 28 && score <= 31) {
      score = '良好';
    } else if (score > 31) {
      score = '优秀';
    }
    return score
  },
}

2.导入report.js 并使用

import report from 'js文件所在位置'
filters: {
    formatScore(score) {
      return report.formatScore(score);//使用导入的report.js中的report.formatScore方法
    }
  },
methods: {
    getPhysicalResult() {
      this.$http.get('/rc_ChildTest/testResult').then((res) => {
        this.isDisplayIcon = report.formatScore(score参数);//这里直接使用导入的report.js中的report.formatScore方法。在methods方法中可以使用过滤器中的方法。
      })
    },
  },

我是这么解决的,大家如果还有更好的方法,希望大家写在评论里,欢迎大家批评指正。

以上这篇在Vue methods中调用filters里的过滤器实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
javascript实现自动输出文本(打字特效)
Aug 27 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
用React Native制作一个简单的游戏引擎
May 27 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 #Javascript
对vue中methods互相调用的方法详解
Aug 30 #Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 #Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 #Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 #jQuery
jsonp跨域及实现百度首页联想功能的方法
Aug 30 #Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 #Javascript
You might like
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
PHP会话处理的10个函数
2015/08/11 PHP
可输入的下拉框
2006/06/19 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python列表操作实例
2015/01/14 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
原生python实现knn分类算法
2019/10/24 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
专业毕业生个性的自我评价
2013/10/03 职场文书
《阳光》教学反思
2014/02/23 职场文书
小学生开学感言
2014/02/28 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
纪委立案决定书
2015/06/24 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书