vue 过滤器filter(全面)

在官方文档中,是这样说明的:可被用于一些常见的文本格式化,vue中过滤器的作用可被用于一些常见的文本格式化。(也就是修饰文本,但是文本内容不会改变)

补充:

过滤器分全局过滤器和局部过滤器,下边我着重说下全局过滤器,因为全局过滤器在项目中使用频率非常高!

局部过滤器:

过滤器可以用在两个地方:双花括号插值 或 v-bind表达式。

eg:先来看看第一个小例子:

<div id="app">
    <p>电脑价格:{{price | addPriceIcon}}</p>
</div>

<script>
 let vm = new Vue({
    el:"#app",
    data:{
        price:200
    },
    filters:{
        //处理函数
        addPriceIcon(value){
            console.log(value)//200
            return '¥' + value
        }
    }
 })
</script>

上边代码,我的需求是想把价格前面加上人民币符号(¥),模板中文本后边需要添加管道符号( | )作为分隔,管道符 | 后边是文本的处理函数,处理函数的第一个参数是:管道符前边的——文本内容,如果处理函数上边传递参数,则从第二个参数依次往后是传递的参数。可能有人会问:你手动加上去不就得了!如果页面有上千个价格需要添加,怎么办?几十个页面需要添加怎么办呢,手动加能累晕!所以这种通用机制很重要。

在看一个类似官方文档的例子:(把输入的英文首字母大写,如果连续输入,以空格隔开)

<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>

显示:(首字母变为大写!)


***全局过滤器***:(!!!!重点!!!!)

全局过滤器使用:Vue.filter( filterName,( )=>{ return // 数据处理结果 } ) 

<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>

上边代码,全局过滤器,

参数一:是过滤器的名字,也就是管道符后边的处理函数;

参数二:处理函数,处理函数的参数同上。。。

(补充)在实际开发中,全局过滤器经常会被在数据(比如时间、日期的装饰)上边,通常我们会把处理函数给抽离出去,统一放在一个.js文件中,下边用代码说下

//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中 导入 上边 filter.js文件 ,当然你也可以在任何组件中导入 filter.js这个文件,但是对于全局过滤器来说,最好是在main.js中定义,规范些,导入的是一个对象,所以使用Object.keys()方法,得到一个由key组成的数组,遍历数据,让key作为全局过滤器的名字,后边的是key对应的处理函数,这样在任何一个组件中都可以使用全局过滤器了

//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')

 

在news.vue组件中使用 全局过滤器:

<template>
    <div>
      <h1>{{price | filter_price}}</h1>
    </div>
</template>

<script>
export default {
    name:'news',
    data(){
        return{
            price:1200
        }
    }  
}
</script>

 

通过全局过滤器讲一个别的小知识点:当我们引用vue框架时,vue会被自动添加到window全局对象上边,而Vue正是一个构造函数,里边定义的是一些静态方法和静态属性,我们知道在ES6类中有静态方法,只有类可以调用!这样也就不难理解了,filter全局过滤器可以被Vue所调用,因为它是一个静态方法。

console.log(window);

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页