在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的3d效果实现代码
Mar 23 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
vue transition 在子组件中失效的解决
Nov 12 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 minixml详解
2008/07/19 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
phalcon框架使用指南
2016/02/23 PHP
PHP基本语法实例总结
2016/09/09 PHP
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
Python实现二分法算法实例
2015/02/02 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
python实现贪吃蛇双人大战
2020/04/18 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
银行优秀员工事迹
2014/02/06 职场文书
假期安全教育广播稿
2014/10/04 职场文书
入股合作协议书
2014/10/12 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
详解MySQL 用户权限管理
2021/04/20 MySQL
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
python开发飞机大战游戏
2021/07/15 Python