在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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
微信小程序 标签传入数据
May 08 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
利用 JavaScript 构建命令行应用
Nov 17 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
PHP 数组实例说明
2008/08/18 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
使用angular写一个hello world
2015/01/23 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python人民币小写转大写辅助工具
2018/06/20 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python挖矿算力测试程序详解
2019/07/03 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
internal修饰符起什么作用
2013/12/16 面试题
Java语言的优势
2015/01/10 面试题
社区志愿者活动总结
2014/06/26 职场文书
员工激励培训演讲稿
2014/09/16 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
实习生矿工检讨书
2014/10/13 职场文书
质量整改报告范文
2014/11/08 职场文书
会计专业自荐信范文
2015/03/05 职场文书
感恩主题班会教案
2015/08/12 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书