vue2.0学习笔记（第三讲）（计算属性、过滤器）

头像
倩儿爱甜食
    阅读 9 分钟
    2

    一、计算属性

            var vm = new Vue({
            el:'#box',
            data:{
                a:1
            }
        });

    在上述代码当中，我们可以知道vm为一个vue的实例对象，在data当中声明的是vm这个实例对象的普通属性a，在实例对象内部可以通过this.a来获取，在实例外部可以通过vm.a来获取。

    <script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                a:1
            }
        });
        document.onclick = function(){
            vm.a = 2;
        }
    };
</script>
<div id="box">
    {{a}}
</div>

    当页面渲染时，页面上数据模板显示为1，当点击页面任意处时，数据模板变为2。
    而vm这个实例对象的计算属性放在computed当中，计算属性使用的示例代码如下所示：

    <script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                a:1
            },
            computed:{
                b:function(){
                    return this.a + 3;
                }
            }
        });
    };
</script>
<div id="box">
    <h2>{{a}}</h2>
    <h2>{{b}}</h2>
</div>

    图片描述

    在computed这个对象当中放置的都是vm这实例对象的计算属性，并且每一个计算属性值必须为函数的形式，其计算属性的值完全取决于后面所跟的这个函数的返回值，故我们可以在函数内放置一些业务逻辑代码，该函数必须要有返回值。如上所示，b虽然为vm的计算属性，不过与普通属性的用法相同，在实例对象内部通过this.b来获取，在实例对象外部通过vm.b来获取。并且b的属性值完全取决于a的属性值，所以当a的属性值发生改变之后，b的值也会发生相应的变化。

    上述默认使用的是计算属性当中读取（get）的用法，不过这个用法也是最常用的，计算属性的完整用法包含读取和设置（get和set）。示例代码如下所示：

    <script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                a:1
            },
            computed:{
                b:{
                    get:function(){
                        return this.a + 2;
                    },
                    set:function(v){
                        this.a = v - 1;
                    }
                }
            },
            methods:{
                change:function(){
                    this.b = 100;
                }
            }
        });

    };
</script>
<div id="box">
    <button @click="change()">按钮</button>
    <h2>{{a}}</h2>
    <h2>{{b}}</h2>
</div>

    当页面加载出来时，页面显示为：

    图片描述

    当我们点击按钮后，页面显示为：

    图片描述

    当外部访问b的属性值时，默认调用其计算属性当中读取(get)函数，此时b的属性值完全取决于当前a的属性值。点击按钮对b进行赋值操作，一旦外部有对b进行赋值操作，即默认调用其计算属性当中的设置(set)函数，形参v用于接收外部给b赋的值，在该函数内部通过v来给a进行赋值，当模板再次渲染时，页面当中b的属性值的读取同样需要通过get函数，取决于当前a的属性值。

    二、过滤器

    1、大小写转换的过滤器

    如我们在data当中定义一个属性msg:'welcome'，我们在模板渲染时，使用{{msg.toUpperCase()}}可以把该属性字符串当中每一个字符都转换为大写字母来输出。类似的，我们使用{{msg.toLowerCase()}}可以把该属性字符串当中每一个字符都转换为小写字母来输出。如{{msg[0].toUpperCase()+msg.slice(1)}}可以保持该属性字符串当中首字母为大写状态，其他位置的字符状态不变。我们也可以在{{}}模板当中通过字符拼接的方式来达到对属性值进行过滤输出的效果。如我们在data当中定义属性price:12，我们在模板当中使用 {{'$'+price.toFixed(2)}} 即可达到输出为$12.00的效果。

    2、与数组配合使用的过滤器

    由于我们可以在computed计算属性的函数当中使用js方法，故可以在其内部实现过滤的功能。即我们可以在computed当中对实例对象的普通数据对象进行过滤处理后得到一个新的数据对象，在最后视图展示时，采用这个新的数据对象，从而达到数据过滤的效果。
    如我们想要对来源于后台的数组，或实例对象的data当中定义的数组，对其进行切段选取过滤后，再使用v-for指令来使其数据在页面上显示。我们可以做如下处理：

    <script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                arr:[1,2,3,4,5,6,7]
            },
            computed:{
                filterArr:function(){
                    return this.arr.slice(2,6);
                }
            }
        });

    };
</script>
<div id="box">
    <ul>
        <li v-for="value in filterArr">{{value}}</li>
    </ul>
</div>

    图片描述

    我们也可以使用原生js当中的filter方法来实现许多复杂的过滤操作，filter方法的用法一般为arr.filter(callback)返回值为一个数组，即数组arr当中的每一个元素都会调用一次这个callback函数，并且这个callback函数接收一个参数，（形参名可任取）代表当前遍历到的数组当中的元素，当该回调函数执行一次之后，返回值若为true，则保留该元素到新的结果数组当中，返回值若为false，则不会在结果数组当中保留这个元素，从而达到对数组当中元素进行过滤的效果。使用filter方法不会改变原数组。
    比如要筛选出arr数组当中大于或等于18的元素，放在一个新的数组brr当中，并且在页面当中显示出来：

    <script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                arr:[0,1,7,19,72,3,25,18]
            },
            computed:{
                brr:function(){
                    return this.arr.filter(function(elem){
                        return elem >= 18;
                    });
                }
            }
        });

    };
</script>
<div id="box">
    <ul>
        <li v-for="value in brr">{{value}}</li>
    </ul>
</div>

    图片描述

    比如我们要筛选出arr这个数组当中含有字母o的所有元素，组成一个新数组，并在页面上展示出来：

    <script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
                b:'o',
                arr:['apple','banana','orange','tomato','pear']
            },
            computed:{
                brr:function(){
                    var self = this;
                    return this.arr.filter(function(elem){
                        return elem.indexOf(self.b) != -1;
                    });
                }
            }
        });

    };
</script>
<div id="box">
    <ul>
        <li v-for="value in brr">{{value}}</li>
    </ul>
</div>

    3、使事件延迟执行的过滤器

    一般配合键盘事件来使用，使得定义的键盘事件延迟执行，类似于原生js当中的setTimeout。在使用之前我们需要先引入lodash.js文件。（lodash.js文件的下载地址）。我们在下载的文件夹当中的dist文件夹当中把lodash.min.js复制到项目文件夹当中，并引入。示例代码为：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script src="lodash.min.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    
                },
                methods:{
                    show:_.debounce(function(){
                        alert(1);
                    },2000)
                }
            });

        };
    </script>
</head>
<body>
    <div id="box">
        <input type="text" @keyup="show()">
    </div>
</body>
</html>

    即我们在文本框当中键入一个字符后，延迟2秒之后才会触发执行show函数。

    4、排序过滤器

    在使用之前我们需要先引入lodash.js文件。因为我们需要在computed计算属性当中使用lodash的_.orderBy()方法。示例代码如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script src="lodash.min.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    user:[
                        {name:"fred",age:48},
                        {name:"barney",age:34},
                        {name:"fred",age:40},
                        {name:"barney",age:36}
                    ]
                },
                computed:{
                    arr:function(){
                        return _.orderBy(this.user,['name','age'],['asc','desc']);
                    }
                }
            });

        };
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
    </div>
</body>
</html>

    _.orderBy()方法的返回值为一个排序完成的数组，其第一个参数为数组名，第二个参数为该数组对象当中依据的排序字段名，在第三个参数当中asc表示正序排列，desc表示倒序排列。上述代码表示对user这个数组进行排序，先按照name字段进行正序排列，如果遇到name字段一样的，则按照age来进行倒序排列。故输出结果为：

    图片描述

    5、自定义全局过滤器

    我们可以自定义一个全局的过滤器，如取名为my-filter，则我们使用时只要在数据模板当中{{a|my-filter}}来调用即可。我们通过Vue.filter('my-filter',function(input){ return ...});来定义这个自定义过滤器的内部逻辑，其中形参input代表接收使用该过滤器的数据a，该函数的return值即为{{a|my-filter}}对应的值。示例代码如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            Vue.filter('my-filter',function(input){
                return input < 10 ? '0' + input : input;
            });
            var vm = new Vue({
                el:'#box',
                data:{
                    a:''
                }
            });

        };
    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="a">
        <h3>{{a|my-filter}}</h3>
    </div>
</body>
</html>

    图片描述

    我们还可以自定义可接收参数的全局过滤器，示例代码如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            Vue.filter('my-filter',function(input,a,b){
                return input - a - b;
            });
            var vm = new Vue({
                el:'#box',
                data:{
                    a:'10'
                }
            });

        };
    </script>
</head>
<body>
    <div id="box">
        <input type="text" v-model="a">
        <h3>{{a|my-filter(1,2)}}</h3>
    </div>
</body>
</html>

    图片描述

    我们可以通过自定义过滤器来定义一个时间转换器，示例代码如下所示：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            Vue.filter('date',function(input){
                var o = new Date(input);
                var result =  o.getFullYear()+'-'+(o.getMonth()+1)+'-'+
                o.getDate()+' '+o.getHours()+':'+o.getMinutes()+':'+
                o.getSeconds();
                return result;
            });
            var vm = new Vue({
                el:'#box',
                data:{
                    a:Date.now()
                }
            });

        };
    </script>
</head>
<body>
    <div id="box">
        <h3>{{a}}</h3>
        <h3>{{a|date}}</h3>
    </div>
</body>
</html>

    图片描述

    vue.js
    倩儿爱甜食
    477 声望62 粉丝

    一切都是最好的安排 ^-^ !

    « 上一篇
    vue2.0学习笔记（第二讲）（事件对象、键盘事件及自定义键盘信息、属性绑定）
    下一篇 »
    vue2.0学习笔记（第四讲）（生命周期函数、vue实例的简单方法、自定义指令）

    引用和评论

    推荐阅读
    头像
    前端自动化构建之Gulp的使用（学习笔记）

    倩儿爱甜食阅读 2.2k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 494评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 892

    0 条评论
    得票最新