vue2过滤器用法

vue2有使用过滤器 vue3已舍弃使用

vue2过滤器的使用：用于一些常见的文本格式化 例如：日期格式化 数字大小写等

过滤器的作用：可以在不改变原数据 只是对数据进行加工处理并返回过滤后的数据，再进行调用处理

过滤器分为全局过滤器和局部过滤器

局部过滤器用法：

filters作为选项对象与data同级 用法类似于methods 里面放方法 滤器名自己定义 在页面中管道符|前面是数据 后面是过滤器名

例如：0代表男 1代表女 过滤出男女并渲染到页面上

<template>
    <div>
        <ul>
            <li v-for="item,i in list" :key="i">
                {{item.name}}--{{item.sex | sex}}
            </li>
        </ul>        
    </div>
</template>
<script>
export default {
    data() {
        return {
            list:[
                {name:'张三',sex:0},
                {name:'李四',sex:1},
                {name:'王五',sex:0}
            ]
        }
    },
    filters:{
        sex(val){//val就是要过滤的数据
            if(val==0){
                return '男'
            }else{
                return '女'
            }
        }
    }
}
</script>

效果：

 

全局过滤器用法：

在main.js中定义全局过滤器 Vue.filter()里面有两个参数 第一个参数是过滤器名 第二个参数是函数 函数的参数就是要过滤的数据 里面用法与局部一样 在页面上的用法也与局部一样

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



Vue.config.productionTip = false

Vue.filter('sex',function(val){
  if(val==0){
    return '男'
  }else{
    return '女'
  }
})

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

效果：