我正试图像这样访问过滤函数中的vue实例数据.

new Vue({
 data:{
  amount: 10,
  exchangeRate:50
 },
 el:"#app",
 filters:{
   currency: function(amount){
             console.log(this);
             //return amount * this.exchangeRate;
            return amount *50;

   }
 }
})

HTML:

<div id="app">
 {{ amount | currency}}
</div>

我的目标是使用return amount * this.exchangeRate;,但这里this等于window.

推荐答案

据Vue的创始人埃文说:

主要使用触发状态改变的方法.当你调用一个方法时,它通常意味着一些副作用.

过滤器主要用于需要在整个应用程序中重复使用的简单文本格式.过滤器应该是纯的——没有副作用,只有数据输入和数据输出.

将计算(computed)属性用于局部、特定于组件的数据转换.与过滤器类似,计算的getter应该是纯的.

在一种特殊情况下,您希望使用仅在模板中可用的范围变量(例如v-for别名)来计算某些内容,在这种情况下,可以使用"helper方法",以便通过传递参数来计算某些内容.

(来源:https://forum-archive.vuejs.org/topic/830/method-vs-computed-vs-filter/2)

因此,由于过滤器依赖于组件,我认为在这种情况下应该使用计算(computed)属性,而不是过滤器.

Vue.js相关问答推荐

在 Nuxt3 中使用 Vue3 vue-ganntastic 插件

在移动版本中使用标准的 v-data-table

如何在 v-for 指令切换状态下安全地制作包含附加到对象的复选框的列表(W/O 切换列表中的其他复选框)?

在 jest document.querySelector 中测试 vue 组件期间始终返回 null

将检测外部点击自定义指令从 Vue 2 迁移到 Vue 3

Vue 两种方式的 prop 绑定

eslint – 如何知道 defined定义规则的位置

Vue.js 中 Chrome 和 Datalist 的性能问题

Vue&TypeScript:在项目目录外的 TypeScript 组件中实现导入时如何避免错误 TS2345?

如何在 Node.js 服务器上部署 Vue.js 应用程序

在组件之间共享数据

Vuex:无法读取未定义的属性'$store'

使用 Spring Boot(VueJS 和 Axios 前端)禁止发布 403 帖子

如何在 vue.js 2 上循环对象观察者?

何时使用

标签中的 href 赋值

NPM:403 禁止 - PUT http://registry.npmjs.org/[package-name] - 禁止

Vuetify 过渡:如何设置过渡速度

如何使用 Vuetify 验证复选框组

在鼠标悬停时动态添加和删除类