Vue过滤器：全局过滤器

 

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

 

一 项目结构

 

 

二 main.js

 

import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

// 首字母大写过滤器
Vue.filter("capitalize", function(value) {
  if (!value) {
    return "";
  }
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

new Vue({
  render: h => h(App)
}).$mount("#app");

 

三 App.vue

 

<template>
  <div id="app">
    <h3 :title="name | capitalize">{{name | capitalize}}</h3>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      name: "mongo"
    };
  }
};
</script>

<style>
</style>

 

四 运行效果