Vue 过滤（十）

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<template>
  <div id="app">
     <!-- 使用 capitalize 过滤器 -->
     {{ name | capitalize}}
  </div>
</template>
<script>
// 导入组件
import Learn from "./components/Learn"

export default {
  name: "App",
  components: {
    Learn   // 注入
  },
  data() {
    return {
      name: "java"
    }
  },
  // 局部过滤器，仅当前实例有效
  filters: {
    // 定义一个将首字母转换为大写的过滤器
    capitalize: function(value) {
       if (!value) return ‘‘
       value = value.toString();
       return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
  
};
</script>

Vue.filter(‘capitalize‘, function (value) {
  if (!value) return ‘‘
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

{{ message | filterA | filterB }}

{{ message | filterA(‘arg1‘, arg2) }}