在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 $.ajax各个事件执行顺序
Oct 15 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
使用Vue生成动态表单
Nov 26 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实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Python中拆分字符串的操作方法
2019/07/23 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python实现与redis交互操作详解
2020/04/21 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
服装厂厂长职责
2013/12/16 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
党员证明信
2015/06/19 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书