在Vue JS中，从vue示例内的方法调用过滤器

eeq64g8w 于 2023-02-19 发布在 Vue.js

关注(0)|答案(7)|浏览(121)

假设我有这样一个Vue示例：

new Vue({
    el: '#app',

    data: {
        word: 'foo',
    },

    filters: {
       capitalize: function(text) {
           return text.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
       }
    },

    methods: {
        sendData: function() {
            var payload = this.$filters.capitalize(this.word); // how?
        }
    }
}

我可以很容易地在模板中使用过滤器，如下所示：

<span>The word is {{ word | capitalize }}</span>

但是我如何在示例方法或计算属性中使用这个过滤器呢？（显然这个例子很简单，我的实际过滤器要复杂得多）。

vue.js

来源：https://stackoverflow.com/questions/33639312/in-vue-js-call-a-filter-from-a-method-inside-the-vue-instance

7条答案

按热度按时间

imzjd6km1#

this.$options.filters.capitalize(this.word);

请参见http://vuejs.org/api/#vm-options

赞(0）回复(0）举报 2023-02-19

vatpfxk52#

这对我很有效
1.定义筛选器

//credit to @Bill Criswell for this filter
Vue.filter('truncate', function (text, stop, clamp) {
    return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
});

1.使用过滤器

import Vue from 'vue'
let text = Vue.filter('truncate')(sometextToTruncate, 18);

赞(0）回复(0）举报 2023-02-19

kmbjn2e33#

如果你的过滤器是这样的

<span>{{ count }} {{ 'item' | plural(count, 'items') }}</span>

这就是答案

this.$options.filters.plural('item', count, 'items')

赞(0）回复(0）举报 2023-02-19

nzrxty8p4#

您可以创建一个类似vuex的helper函数，将全局注册的过滤器Map到vue组件的methods对象中：

// map-filters.js
export function mapFilters(filters) {
    return filters.reduce((result, filter) => {
        result[filter] = function(...args) {
            return this.$options.filters[filter](...args);
        };
        return result;
    }, {});
}

用法：

import { mapFilters } from './map-filters';

export default {
    methods: {
        ...mapFilters(['linebreak'])
    }
}

赞(0）回复(0）举报 2023-02-19

ogsagwnx5#

试试看：

this.$options.filters.capitalize

赞(0）回复(0）举报 2023-02-19

mqxuamgl6#

为了补充Morris的回答，这是一个我通常用来放置过滤器的文件的例子，你可以用这个方法在任何视图中使用。

var Vue = window.Vue
var moment = window.moment

Vue.filter('fecha', value => {
  return moment.utc(value).local().format('DD MMM YY h:mm A')
})

Vue.filter('ago', value => {
  return moment.utc(value).local().fromNow()
})

Vue.filter('number', value => {
  const val = (value / 1).toFixed(2).replace('.', ',')
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
})
Vue.filter('size', value => {
  const val = (value / 1).toFixed(0).replace('.', ',')
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.')
})

赞(0）回复(0）举报 2023-02-19

6tr1vspr7#

在vue3中，您需要根据文档加载过滤器，然后在计算属性或方法中访问它们，如下所示：