vue filter过滤器处理数据

全局使用过滤器在main.js里

import Vue from 'vue'
import App from './App'
import router from './router'
// import appApi from './api/api'
// import "./directive/drag"

// Vue.prototype.$appApi = appApi;
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({
  el:'#app',
  router,
  components: { App },
  template: '<App/>'
})

在自定义的页面里使用过滤器

<template>
<div>
	<input v-model="message">
	<p>{
  {message|capitalize}}</p>//双花括号插值
	<div v-bind:id="message | capitalize"></div>//v-bind 表达式 
	
</div>
</template>

<script>
export default {
	data(){
		return{
			id:'',
			message:'dkdjdien'