vue功能：过滤器 filter

最新推荐文章于 2024-05-20 09:10:07 发布

落花流雨

最新推荐文章于 2024-05-20 09:10:07 发布

阅读量316

点赞数

分类专栏： # vue2.0全家桶文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44666644/article/details/107336057

版权

vue2.0全家桶专栏收录该内容

31 篇文章 3 订阅

订阅专栏

vue功能：过滤器 filter

声明：本文章仅是用于自我记录学习。参考下面文档：

https://blog.csdn.net/qq_42778001/article/details/95613371

https://blog.csdn.net/sinat_17775997/article/details/56495373

https://blog.csdn.net/weiweismile123/article/details/70226319

https://blog.csdn.net/qappleh/article/details/89639948

含义：vue中过滤器的作用可被用于一些常见的文本格式化。（也就是修饰文本，但是文本内容不会改变）

过滤器分类：全局过滤器和局部过滤器

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

示例一：价格前面加上人民币符号（¥）

使用方法：

模板中文本后边需要添加管道符号（ | ）作为分隔，管道符 | 后边是文本的处理函数。
处理函数的第一个参数是：管道符前边的——文本内容，如果处理函数上边传递参数，则从第二个参数依次往后是传递的参数。

传参：

传一个参数
{{aa | filterAa}}

filters:{
  filterAa(aa){
    // 这额aa就是过滤器传入的参数
  }
}
传2个参数
{{aa | filterAa(bb)}}

filters:{
  filterAa(aa,bb){
    // 这额aa就是过滤器传入的第一个参数
    // 这额bb就是过滤器传入的第二个参数
  }
}
传3个参数
{{aa | filterAa(bb,cc)}}

filters:{
  filterAa(aa,bb,cc){
    // 这额aa就是过滤器传入的第一个参数
    // 这额bb就是过滤器传入的第二个参数
    // 这额cc就是过滤器传入的第三个参数
  }
}

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

示例三：计算属性实现列表过滤功能

v-for filter列表过滤功能

var app5 = new Vue({
    el: '#app5',
    data: {
        shoppingList: [
            "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
        ],
        key: ""
    },
    computed: {
        filterShoppingList: function () {
            // `this` points to the vm instance
            var key = this.key;
            var shoppingList = this.shoppingList;
            return shoppingList.filter(function (item) {
                return item.toLowerCase().indexOf(key.toLowerCase()) != -1
            });;
        }
    }
})

<div id="app5">
        <h2>Vue-for</h2>
        <ul>
            <li v-for="item in shoppingList">
                {{ item }}
            </li>
        </ul>
        <h2>Vue-for filter实现</h2>
        <ul>
            Filter Key<input type="text" v-model="key">   
            <li v-for="item in filterShoppingList">
                {{ item }}
            </li>
        </ul>        
    </div>

示例四：添加多个过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>filter</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!--添加两个过滤器,注意不要冲突,注意先后顺序-->
            <li v-for="item in list">{{item.id | filterAdd1 | filterAdd2}}</li>
        </ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                list:[
                    {"id":0,"title":"11111","cont":"111111"},
                    {"id":1,"title":"22222","cont":"111111"},
                    {"id":2,"title":"33333","cont":"111111"},
                    {"id":3,"title":"44444","cont":"111111"},
                ]
            }
        },
        filters:{
            filterAdd1(item) {
                return item+10;
            },
            filterAdd2(item) {
                return '$'+item;
            }
        },
        methods:{
        },
        mounted(){
        }
    })
</script>
</html>

示例五：计算属性筛选，methods方法筛选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="vue.js"></script> -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
 
<body>
    <div id="app">
        <div @click="addMore">加载更多</div>
        <ul><li v-for="item in filterlist">{{item}}</li></ul>
        <hr>
        <ul><li v-for="item in filterlistFun()">{{item}}</li></ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                size:5,
                list:[
                    {"id":0,"title":"11111","cont":"111111"},
                    {"id":1,"title":"22222","cont":"111111"},
                    {"id":2,"title":"33333","cont":"111111"},
                    {"id":3,"title":"44444","cont":"111111"},
                    {"id":4,"title":"55555","cont":"55555"},
                    {"id":5,"title":"66666","cont":"66666"},
                    {"id":6,"title":"77777","cont":"77777"},
                    {"id":7,"title":"77777","cont":"88888"},
                    {"id":8,"title":"888888","cont":"999999"},
                    {"id":9,"title":"000000","cont":"99999"},
                    {"id":10,"title":"a88888","cont":"99999"},
                    {"id":11,"title":"a22222","cont":"111111"},
                    {"id":12,"title":"a33333","cont":"111111"},
                    {"id":13,"title":"a44444","cont":"111111"},
                    {"id":14,"title":"a55555","cont":"55555"},
                    {"id":15,"title":"a66666","cont":"66666"},
                    {"id":16,"title":"a77777","cont":"77777"},
                    {"id":17,"title":"a77777","cont":"88888"},
                    {"id":18,"title":"a888888","cont":"999999"},
                    {"id":19,"title":"a000000","cont":"99999"},
                    {"id":20,"title":"a88888","cont":"99999"}
                ]
            }
        },
        computed: {
            filterlist () {
                let num=this.size;
                return this.list.filter(function (number) {
                    return number.id < num
                })
            }
        },
        methods:{
            filterlistFun(val){
                let num=this.size;
                return this.list.filter(function (number) {
                    return number.id < num
                })
            },
            addMore(){
                this.size+=5;
            },
        },
        mounted(){
        }
    })
</script>
</html>

全局过滤器：

示例一：添加多个过滤器

结果显示：输入框，填写：34

$54
$55
$56

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>filter</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!--添加两个过滤器,注意不要冲突,注意先后顺序-->
            <!-- 过滤传值，带引号的是字符串，不带是number,传的值可以动态绑定-->
            <li v-for="item in list">{{item.id | filterAdd1(Number(input),20) | filterAdd2}}</li>
        </ul>
        <input type="text" placeholder="place" v-model="input">
    </div>
</body>
<script>
    Vue.filter('filterAdd1', function (value,one,two) {
        return value+one+two;//默认第一个参数就是默认要过滤的那个值
    })
    Vue.filter('filterAdd2', function (value) {
        return '$'+value;
    })
    var vm = new Vue({
        el:'#app',
        data(){
            return {
                input:5,
                list:[
                    {"id":0,"title":"11111","cont":"111111"},
                    {"id":1,"title":"22222","cont":"111111"},
                    {"id":2,"title":"33333","cont":"111111"},
                    {"id":3,"title":"44444","cont":"111111"},
                ]
            }
        },
        methods:{
        },
        mounted(){
        }
    })
</script>
</html>

示例二：项目中如何使用全局过滤器

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

filterName：过滤器的名字，也就是管道符后边的处理函数；处理函数的参数同上

<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所调用，因为它是一个静态方法。

落花流雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue功能：过滤器 filter

vue功能：过滤器 filter声明：本文章仅是用于自我记录学习。参考下面文档：https://blog.csdn.net/qq_42778001/article/details/95613371https://blog.csdn.net/sinat_17775997/article/details/56495373https://blog.csdn.net/weiweismile123/article/details/70226319https://blog.csdn.net/qappleh/a
复制链接

扫一扫