Vue filter example

Instructions:

{ {String|Partial filter name}}

<template>
  <div id="app">
  	//这里
    {
    
    {
    
    msg|hongzhe}}
  </div>
</template>
<script>

export default {
    
    
  data(){
    
    
    return {
    
    
      msg:"hello"
    }
  }
}
</script>

Global filter

Add the code in main.js, call the method in the previous code block

// 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);

});

Local filter

<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>