在Vue methods中调用filters里的过滤器实例
更新时间：2018年08月30日 10:29:28 作者：huipo22
今天小编就为大家分享一篇在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-element-admin如何设置默认语言，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue 子组件和父组件传值的示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-09-09
对于Vue为何采用异步渲染，简单来说就是为了提升性能，因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue会在本轮数据更新后，再去异步更新视图，本文主要通过几个实例给大家介绍一下Vue为何采用异步渲染,需要的朋友可以参考下2023-06-06
在开发Web应用程序时，常常需要进行登录验证和权限管理，本文主要介绍了vue登录路由权限管理的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家详细介绍了vue实现瀑布流组件滑动加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了多页vue应用的单页面打包方法(内含打包模式的应用)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
vscode根据eslint保存⾃动修复配置,下面这篇文章主要给大家介绍了关于vscode中eslint配置保存自动修复代码的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
viewer.js用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,这篇文章主要给大家介绍了关于vue3使用viewer的详细用法,文中通过代码介绍是非常详细,需要的朋友可以参考下2023-12-12
本篇文章主要介绍了基于vue的换肤功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
一文详细聊聊vue3的defineProps、defineEmits和defineExpose
vue3官方文档defineProps和defineEmits都是只能在scriptsetup中使用的编译器宏,下面这篇文章主要给大家介绍了关于vue3的defineProps、defineEmits和defineExpose的相关资料,需要的朋友可以参考下2023-02-02
最新评论