Vue2.0中Filter的运用题目

2024年4月28日 166次阅读 来源: yanm1ng

vue2.0里，不再有自带的过滤器，须要本身定义过滤器

在 Vue1.0 中内置了几种有用的过滤器函数如 uppercase ，但在 Vue2.0 中这些要领都被废除了须要本身定义过滤器。

定义的要领：注册一个自定义过滤器，它吸收两个参数：过滤器 ID 和 过滤器函数，个中过滤器函数吸收多个参数。

举个栗子：

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

//*.vue
<template>
    <div>{{ content | reverseStr }}</div>
</template>

<script>
export default {
  name: 'component-name',
  data () {
    return {
      content: 'abcd'
    }
  }
}
</script>

//render result
<div>dcba</div>

看到这里熟习 Shell 管道敕令的同砚就会觉得很熟习，没错 Vue 的过滤器操作符 | 和 Shell 敕令一样，能将上一个过滤器输出内容作为下一个过滤器的输入内容，也就是说 Vue 许可你如许运用过滤器：

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

//*.vue
<template>
    <div>{{ content | reverseStr | removeNum }}</div>
</template>

<script>
export default {
  name: 'component-name',
  data () {
    return {
      content: 'abcd1234'
    }
  }
}
</script>

//render result
<div>dcba</div>

是否是很好很壮大？！但在 Vue2.0 中运用过滤器我碰到一个如许的场景，我须要在 v-html 指令中运用过滤器，以下：

//*.vue
<template>
    <div class="markdown" :v-html="content | marked"></div>
</template>

<script>
export default {
  name: 'component-name',
  data () {
    return {
      content: '## 题目**哈哈**'
    }
  }
}
</script>

这类写法在 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 来盘算属性。所以我们须要举行改写：

<template>
    <div class="markdown">{{ markedContent }}</div>
</template>

<script>
export default {
  name: 'component-name',
  data () {
    return {
      content: '## 题目**哈哈**'
    }
  },
  computed: {
    markedContent () {
      return marked(content)
    }
  }
}
</script>

gayHub: https://github.com/yanm1ng

    原文作者：yanm1ng
    原文地址: https://segmentfault.com/a/1190000009610801
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞