Vue2.0中Filter的使用問題

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