Vue中，methods中调用filters里的过滤器

需求：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里的过滤器相关推荐

在vue中methods互相调用的方法
在vue中methods互相调用的方法转载于:https://www.cnblogs.com/macT/p/10212878.html
vue的methods中方法写法
vue的methods中存放方法,写法有aaa(){ }和bbb:function(){ } methods:{ // key:value key是方法名,value是function aaa(){ ...
Vue获取methods中方法的return返回值
Vue获取methods中方法的return返回值 1. 遇到的需求需要调用methods中的一个方法直接使用return返回值: 但直接使用return关键字是undefined,无法直接拿到返回 ...
将Vue项目methods中的方法暴露在window上
这座城市风很大,孤独的人总是晚回家. 我是一个H5,咱们在写APP的时候,也就是APP内部嵌套咱们H5代码的时候,肯定会遇到交互问题,如果使用普通html js css的话应该没有什么太大的问题,因为 ...
vue的method函数互引用_vue 在methods中调用mounted的实现操作
vue 在methods中调用mounted的实现操作首先可以在data中先声明一个变量比如 sureDelBox : ' ' mounted 中 ---> methods 中 ---> ...
在vue、html中手动写日期格式化转换为“yyyy-MM-dd hh:mm:ss”
做前端页面的时候,貌似日期格式化是没有预置的,需要自己写(当然大部分都是直接C+V了),但是觉得那些方法不容易看懂,而且对于小白来说,用起来也不是那么地方便,于是自己写了一个简单的日期格式化函数. 在 ...
vue项目如何在data里调用methods中的方法
vue项目如何在data里调用methods中的方法比如使用swiper组件在data里调用methods中函数的方式:data在vue项目里实际也是个函数,所以只要如下操作就行: data() { ...
vue里获取不到data_vue methods中取不到data值
vue methods中取不到data值 export default { name: "sysAdd", data() { return { form: { name: '', ...
methods中axios里的数据无法渲染到页面
最近在研究axios聊天室室遇到一个问题将axios获取到的数据传递给data,从而改变页面中的数值,但是结果令人失望这是data里的数据原想将data中的items数组换成axios里的res ...

Vue中，methods中调用filters里的过滤器

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

解决方法：

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

2.导入report.js 并使用

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

Vue中，methods中调用filters里的过滤器相关推荐

最新文章

热门文章