vue--过滤器的使用

过滤器的作用就是给一些文本进行处理，比如说首字母进行大写，人民币转美元等，可以设置全局过滤器和局部过滤器。这里只记录全局过滤器。

main.js中写全局过滤器：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

//全局过滤器 首字母变大写
Vue.filter("capitalize",function(val){
  if(!val) return ""
  val = val.toString()
  return val.charAt(0).toUpperCase()+val.slice(1)
} )

  // 全局过滤器 人民币转美元
Vue.filter("toDoller", function (val, num) {
  //没传入num那就默认给num一个2
  // num = num || 2
  if (!val) return ""

  return num == 2 ? "$" + (val * 0.1567).toFixed(2) :  "$" + val * 0.1567

})


new Vue({
  render: h => h(App),
}).$mount('#app')

在组件中进行使用：

<template>
    <div>
        <h3>过滤器</h3>
        <p>元数据：{{ msg }}</p>
        <!-- 首字母大写的作用 -->
        <p>过滤后的数据：{{ msg | capitalize }}</p>
        <hr>
        <p>人民币:{{ money }}</p>
        <p>过滤后成为美元：{{ money | toDoller }}</p>
        <hr>
        <!-- 传入参数 -->
        <p>保留两位小数的美元：{{ money | toDoller(2) }}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'hello',
            money:168
        }
    }
}
</script>

<style>

</style>

效果：

还有局部过滤器，用到时候可以去参看文档。