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>

四运行效果

巴特西

Vue过滤器：全局过滤器

最新文章

热门文章