Vue中的filter和methods

Vue的filter与method

有时候,我们会想在Vue中的filter通过this去访问这个Vue实例上的属性或者方法,但是这样是做不到的,因为此时这个this指的全局对象window。
但是反过来,我们可以在methods去访问到过滤器的方法。由于过滤器分为全局的过滤器和局部的过滤器,所以分为俩种情况。

  1. 全局过滤器
    比如我申明了如下一个过滤器
Vue.filter('filterStatus', function(status) {
    var store = {
        '-1': { label: '待发布'},
        '0': { label: '已发布'},
        '1': { label: '已暂停'},
        '2': { label: '已关闭'}
    };
    return store[status].label;
});

在实例化Vue之前,我定义了一个全局的过滤器,现在我想要methods里面去访问他,可以这么做

Vue.filter('filterStatus')('-1')

使用Vue.filter(‘filterStatus’)可以获取这个方法,后面括号里的其实就是传递参数了。

  1. 局部过滤器
    访问局部过滤器,可以在代码中这么写:
this.$options.filters[filterName](args)

由于在方法中,this是可以访问到Vue这个实例的,所以可以在$option上拿到过滤器

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue,我们可以使用过滤器来对数据进行格式化或处理。要在Vue项目创建全局过滤器,可以在main.js文件注册全局过滤器,并且必须放在Vue实例创建之前。然后可以在各个组件使用这个全局过滤器。具体的步骤如下: 1. 在main.js文件注册全局过滤器。例如,我们可以创建一个名为"filter1"的全局过滤器: Vue.filter('filter1', function(value) { return value.charAt(0).toUpperCase() + value.slice(1); }); 2. 在Vue组件使用过滤器。在模板通过管道符"|"将数据绑定到过滤器上。例如,我们可以使用"filter1"过滤器对message进行处理: <div>{{ message | filter1 }}</div> 3. 如果需要依次使用多个过滤器,可以在模板用管道符连接它们。每个过滤器的参数为上一个过滤器返回的结果。例如,我们可以使用"filter1"和"filter2"两个过滤器对message进行处理: <div>{{ message | filter1 | filter2 }}</div> 另外,你还可以在组件内部定义局部过滤器。局部过滤器只能在当前组件使用,适用于处理数据显示的样式,不会改变原数据。例如,你可以在组件的filters选项定义过滤器,并在模板使用它们: ``` <template> <div> <ul> <li v-for="item in list">{{ item.id | filterAdd1 | filterAdd2 }}</li> </ul> </div> </template> <script> export default { data() { return { list: [ { "id": 0, "title": "11111", "cont": "111111" }, { "id": 1, "title": "22222", "cont": "111111" }, { "id": 2, "title": "33333", "cont": "111111" }, { "id": 3, "title": "44444", "cont": "111111" }, ] } }, filters: { filterAdd1(item) { return item + 10; }, filterAdd2(item) { return '$' + item; } }, methods: { }, mounted() { } } </script> ``` 这样,我们就可以在模板使用filterAdd1和filterAdd2两个过滤器来处理数据了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue过滤器filter的使用](https://blog.csdn.net/Hello_MrShu/article/details/127363940)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue filter的四种用法](https://blog.csdn.net/qappleh/article/details/89639948)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值