Vue学习日记part3 Vue.filter

Vue.filter( id, [definition] ) 

参考:vue 过滤器filter（全面）

用法：注册或获取全局过滤器。

全局指令

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

局部指令 

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

 

列子：局部

<div id="dynamicexample">
	<input type="text" v-model="messages " @keyup="capitalizes">
 	<h3>{{message  | capitalize }}</h3>
</div>

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      message: "",
      messages: ""
    }
  },
  methods: {
    capitalizes() {
      this.message = this.messages
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

全局

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      message: "",
      messages: ""
    }
  },
  methods: {
    capitalizes() {
      this.message = this.messages
    }
  },
})

过滤器可以串联

参考：Vue 过滤器filters及基本用法

{{ message | filterA | filterB }}

filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

栗子：

<div id="dynamicexample">
	<input type="text" v-model="messages" @keyup="capitalizes">
 	<h3>{{message  | capitalizeone | capitalizetwo }}</h3>
</div>

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      message: "",
      messages: ""
    }
  },
  methods: {
    capitalizes() {
      this.message = this.messages
    }
  },
  filters: {
    capitalizeone: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.toUpperCase()
    },
	  capitalizetwo:function (value) {
      if (!value) return ''
      value = value.toString()
      return value.toLowerCase()
    }
  }
})

过滤器是 JavaScript 函数，因此可以接收参数

{{ message | filterA('arg1', arg2) }}

filterA 被定义为接收三个参数的过滤器函数。

• message 的值作为第一个参数，
• 普通字符串 'arg1' 作为第二个参数，
• 表达式 arg2 的值作为第三个参数。

栗子：

<div id="dynamicexample">
	<h3>{{ message | filterA('livia', arg2) }}</h3>
</div>

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      arg2: "吗？",
	  message:"我是"
    }
  },
  methods: {
  },
  filters: {
    filterA: function (value,arg1,arg2) {
      if (!value) return ''
      value = value.toString()
      return `${value} ${arg1} ${arg2}`
    }
  }
})