Vue2.0中Filter的使用问题

why_rookie 发布于2019-08-20 16:56 / 1236人阅读

摘要：里，不再有自带的过滤器，需要自己定义过滤器在中内置了几种实用的过滤器函数如，但在中这些方法都被废除了需要自己定义过滤器。所以我们需要进行改写标题哈哈

vue2.0里，不再有自带的过滤器，需要自己定义过滤器

在 Vue1.0 中内置了几种实用的过滤器函数如 uppercase ，但在 Vue2.0 中这些方法都被废除了需要自己定义过滤器。

定义的方法：注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数，其中过滤器函数接收多个参数。

举个栗子：

//main.js
Vue.filter("reverseStr", function(value) {
    return value.split("").reverse().join("")
});

//*.vue




//render result
dcba

看到这里熟悉 Shell 管道命令的同学就会感觉很熟悉，没错 Vue 的过滤器操作符 | 和 Shell 命令一样，能将上一个过滤器输出内容作为下一个过滤器的输入内容，也就是说 Vue 允许你这样使用过滤器：

//main.js
Vue.filter("removeNum", function (value) {
  return value.replace(/[^0-9]/g, "");
})

//*.vue




//render result
dcba

是不是很好很强大？！但在 Vue2.0 中使用过滤器我遇到一个这样的场景，我需要在 v-html 指令中使用过滤器，如下：

//*.vue

这种写法在 Vue1.0 中并没有问题，但是在 Vue2.0 中抛出错误：

property or method "marked" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

最终查阅官方文档给出的解释是：

Filters can now only be used inside text interpolations ({{}} tags). In the past we"ve found using filters with directives such as v-model, v-on etc. led to more complexity than convenience, and for list filtering on v-for it is more appropriate to move that logic into JavaScript as computed properties.

也就是说过滤器现在只能用在两个地方：mustache 插值和 v-bind 表达式。在 v-model 、v-on 、v-for 等指令时 Vue 还是推荐我们将该逻辑通过 computed 来计算属性。所以我们需要进行改写：

gayHub: https://github.com/yanm1ng

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83263.html

Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

draveness 2019-08-23 16:09 评论0 收藏0
Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

maochunguang 2019-08-02 16:08 评论0 收藏0
Vue2.0实用笔记

摘要：实例中，可追踪数据发生变化时，会开启一个队列，把变化记录其中，在下一次事件循环前，进行去重优化，然后重新渲染。最早通过实现了这一需求，通过事件可监听的变化，实现不同页面的操作。过滤器的使用通过引入中 1、vue中的过渡、动画效果单组件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六种状态。(定...

JowayYoung 2019-08-30 15:56 评论0 收藏0
vue2实践（持续更新）

摘要：记录一些小技巧和踩过的坑由于本篇文章内容太多，导致编辑器有点卡，所以新开辟了一篇实践二，后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了，但是没有绑定到上面的话，不会调用钩子函数。记录一些小技巧和踩过的坑由于本篇文章内容太多，导致SF编辑器有点卡，所以新开辟了一篇 vue2实践（二），后续再这里更新。 1. props 带不带冒号的区别 ...

n7then 2019-08-20 15:05 评论0 收藏0