vue2 filter过滤器的使用

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

1.先介绍下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
　　　　　}
　　　 　})
 
2.组件内部过滤（此例子写法适用于处理数据显示的样式，不会改变原数据）
<!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>

 

3.注册在全局的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>

结果：

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

 

posted @ 2018-07-09 18:40  小兔额乖乖  阅读(18676)  评论(0)  编辑  收藏  举报