filter过滤器(全局和局部)

Posted 2022-12-05 ```飞翔的翅膀```

filter过滤器

全局过滤器

// vue页面
<div id="app">
    <h3>viewContent | addNamePrefix</h3>
</div>
<script>
    Vue.filter("addNamePrefix",(value)=>
        return "my name is" + value
    )
 
    let vm = new Vue(
        el:"#app",
        data:
            viewContent:"吕星辰" 
        
    )
</script>

//filter.js 文件
 
let filter_price = function (val,...params)
    return "¥" + val

let filter_date = function ()
    return "2019/10/20" + val

export filter_price,filter_date //导出过滤函数

//main.js
 
//下边是2种导入方式，推荐第一种
import * as _filter from './filters/filter'
// import filter_price,filter_date from './filters/filter'
 
console.log(_filter)
 
Object.keys(_filter).forEach(item=>
  Vue.filter(item,_filter[item])
)
new Vue(
  router,store,
  render: h => h(App),
).$mount('#app')```

1 后台时间戳的返回处理
通常后台返回的是时间戳  例如：1619314980  时间戳：即1970年1月1日到现在的经过的毫秒数

局部过滤器

<div id="app">
    //输入框
    <input type="text" v-model="content" @change="changeEvent">
     //显示层，后边加一个过滤器处理函数，把英文首字母变为大写
    <h3>viewContent | changeCapitalLetter</h3>
</div>
 
<script>
 let vm = new Vue(
    el:"#app",
    data:
        viewContent:"",
        content:""    
    ,
    methods:
        changeEvent()
            this.viewContent = this.content;
        
    ,
    filters:
        changeCapitalLetter(value)//value是输入框的内容，也是要显示的内容
            if(value)
                let str = value.toString();
                //获取英文，以空格分组把字符串转为数组，遍历每一项，第一项转为大写字母
                let newArr = str.split(" ").map(ele=>
                   return ele.charAt(0).toUpperCase() + ele.slice(1)
                );
                return newArr.join(" ")  //数组转字符串 以空格输出。。。
            
        
    
 )
</script>