您的位置: 首页  >  文章  >  vue filter的四种用法

vue filter的四种用法

分类: 文章 • 2024-06-25 22:58:28

本章主要讲vue2的过滤器的使用

先介绍下vue1与vue2的filter区别，也就是vue2更新的地方

　　a: 2.0将1.0所有自带的过滤器都删除了，也就是说，在2.0中，要使用过滤器，则需要我们自己编写。

　　b: 2.0过滤器的传参方式不是以前的方式，是以函数传参的方式，下面示例（后面有具体示例）：

之前调用:       {{msg | mimi '12' '5'}}
现在调用:   {{msg | mimi('12','5')}}

　c: 移除双向过滤器：

Vue.filter('change', {
　 　　　 　read: function (val) {
　　　　 　　return val
　　　　 　},
　　　　　write: function (val, oldVal) {
　　 　　 　return isEmail(val) ? val : oldVal
　　　　　}
})

1.组件内部过滤（此例子写法适用于处理数据显示的样式，不会改变原数据）

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

2.注册在全局的fliter，filter传值，filter动态传值

<!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的四种用法

3. 计算属性筛选，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>

4.使用js中的迭代函数filter 

vue 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;
            //在使用filter时需要注意的是，前面调用的是需要使用filter的数组，而给filter函数传入的是数组中的每个item，也就是说filter里面的函数，是每个item要去做的，并将每个结果返回。
            return shoppingList.filter(function (item) {
                return item.toLowerCase().indexOf(key.toLowerCase()) != -1
            });;
        }
    }
})
<ul>
    Filter Key<input type="text" v-model="key">   
       <li v-for="item in filterShoppingList">
           {{ item }}
       </li>
   </ul>

最终效果实现了根据关键字来过滤列表的功能。

vue filter的四种用法

其他的一些Js 迭代方法——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()

相关推荐