使用方法：

{{字符串|局部过滤器得名字}}

<template> <div id="app"> //这里 {{msg|hongzhe}} </div> </template> <script> export default { data(){ return { msg:"hello" } } } </script>

全局过滤器

在main.js中添加一下代码，调用方法在上一个代码块

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) Vue.filter("hongzhe",function(value){ //如果字符串为空，返回。 if(!value){ return; } //获取字符串。 value=value.toString(); //将字符串的第一个字母大写并返回。 return value.charAt(0).toUpperCase()+value.slice(1); });

局部过滤器

<template> <div id="app"> //这里 {{msg|hongzhe}} </div> </template> <script> export default { data(){ return { msg:"hello" } },filters:{ upper(value){ //如果字符串为空，返回。 if(!value){ return; } //获取字符串。 value=value.toString(); //将字符串的第一个字母大写并返回。 return value.charAt(0).toUpperCase()+value.slice(1); } } } </script>