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

最新推荐文章于 2021-08-13 22:33:27 发布
最新推荐文章于 2021-08-13 22:33:27 发布
阅读量136 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000011526715
版权

一、计算属性

        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>

图片描述

weixin_33874713
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2.0学习笔记之Vue中的computed属性
12-29
在这一节中，我们学习Vue中的计算属性如何使用？记得在学习Vue的模板相关的知识的时候，知道在模板内可以使用表达式，而且模板内的表达式是非常的便利，但这种遍历是有一定的限制的，它们实际上是用于一些简单的运算...
使用Vue过滤器和计算属性,分别完成一个表格的动态筛选功能,有没有大神会Vue的，帮忙看一下
weixin_40362806的博客
09-13 2629
使用过滤器和计算属性,完成一个表格的动态筛选功能,并且在实例对象创建之后进行对象的挂载 ， ` &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;
vue 多条件和模糊搜索
Zhooson的博客
07-11 6638
html &lt;div class="content"&gt; &lt;div class="right"&gt; &lt;select name="sex" width='100' v-model="formData.sex"&gt; &lt;option value="" selected&g
Vue第一部分(5)：计算属性和过滤器
CSDN专家-微编程的博客
08-13 398
计算属性 在插值表达式中可以直接使用js表达式，这是非常方便的。但是如果表达式的内容很复杂，就会影响代码可读性，而且后期维护起来也不方便，例如下面的场景：需要统计多个商品的总价。 代码如下： <div id="app"> <h2>总价：{{products.reduce((total,p)=>{return total+p.price*p.count;},0)}}</h2> </div> <script> const vm =
vue学习第三天 计算属性 过滤器 watch
qq_26597143的博客
06-24 462
计算属性 我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护，而且在模板中没有语法提示，写起来也十分痛苦。 比如以下代码 <div> {{text.split(',').reverse().join(',')}} </div> 表达式里面包含了3个操作，并不是很清晰，有时候可能会更加复杂，所以在遇到复杂的逻辑时，我们应该使用计算属性。上例可以用计算属性进行改写： <div id="app"> {{reverseTe
Vue 过滤器与计算属性
weixin_34357887的博客
01-04 379
过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，可以参考官方文档，http://cn.vuejs.org/api/#过滤器，过滤器通常会使用管道标志“ | ”， 语法： {{ msg | uppercase }} Vue自带的过滤器 1.Vue自带的过滤器:capitalize 功能:首...
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
12-29
通过前面对Vue的学习，到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法。首先要了解的是$refs属性。但是在深入到JavaScript部分之前，我们先看看模板。 <h1>{{ message }} <button @click=...
vue2.0学习笔记文件.zip
01-13
这份“vue2.0学习笔记文件.zip”包含了作者在学习Vue2.0过程中的笔记和相关项目文件，虽然缺少了某些特定的案例和依赖，但它仍能为我们提供宝贵的参考。 首先，`web.config`可能是用于Web应用程序配置的文件，通常...
vue2.0 自定义日期时间过滤器
08-30
Vue 2.0 自定义日期时间过滤器 本文主要讲述了 Vue 2.0 中自定义日期时间过滤器的实现方法，共提供了两种实现方式。 方法一：使用 filters 实现日期时间过滤器 在 Vue 2.0 中，可以使用 filters 来实现日期时间...
VUE使用计算属性和filter筛选内容
marsur的博客
08-08 3029
搜索框 <el-row style="text-align: left;margin-bottom: 20px"> <el-col :span="16"> <el-input v-model="mySearch" size="small" placeholder="请输入内容" class="input-with-select"/> ...
Vue小模块之功能全面的表格（三）筛选表格中的数据
热门推荐
究极死胖兽的博客
04-06 1万+
Vue小模块之功能全面的表格（三）筛选表格中的数据 技术栈 Vue全家桶： 前端框架 Vue.js 状态管理 Vuex 动态路由匹配 vue-router http服务 axios 模块打包 webpack UI框架 element 数据服务器 服务器端 node.js 基于node的web框架 express 分布式数据库 mongodb mongodb工具 mong...
vue 表格过滤
小羽向前跑
04-17 1071
效果： 组件代码： <template> <div> <input type="text" v-model="searchText"> <ul> <li v-for="(book, index) in filterBooks" :key="index"> 序号 : {{index}}, 书名 ...
vue 利用计算属性本地过滤筛选数据，复选框勾选数据勾选状态不丢失
wj1224_的博客
10-12 3764
功能难点 由于这里的数据是调接口全部拿到了，所以这儿的搜索，其实就是一个本地过滤筛选的效果（利用计算属性实现）。 首先在没有搜索的情况下，勾选几条数据，然后输入搜索条件，得到搜索结果再勾选几个数据，接着去掉搜索条件，要做到之前的勾选数据的状态还在没有丢失，且结果是几次勾选的总和。 （项目中用的是iview的相关组件） 效果图片 相关代码 // 要注意绑定的表格数据，:data=&amp;quot;get...
vue计算属性和过滤器的区别
少油少盐不要辣
01-12 4690
区别如下： 计算属性 过滤器 依赖于一个固定的vue实例 ，在某一个实例中使用 不依赖于实例。可以 定义一个全局过滤器，在多个实例中使用 不接受额外参数，依赖于data属性中的变量 不要求是data中的变量，可以是临时变量。可接受额外参数。 有缓存管理机制，可减少页面调用次数 无缓存机制，调用次数，取决于页面中有所多少过滤器 计算属性虽默认为只读，但可以定义为对象，开启...
Vue -- filter 过滤器、以及在table中的使用
bobobocai的博客
06-17 9297
使用方法： // 双花括号中 {{ isActive| isActiveFitlter}} // 在v-bind 中 <div v-bind:id=" isActive | isActiveFitlter"></div> 一、组件中定义本地 Filter filters:{ isActiveFitlter:function (value){ r...
Vue 2.0 学习笔记：渐进式前端框架解析及HelloWorld示例
"Vue 2.0 版本的学习笔记" Vue.js 是一款广泛采用的前端JavaScript框架，由尤雨溪创建。Vue 2.0 是该框架的一个主要版本，它致力于提供一个渐进式和自底向上增量开发的解决方案。渐进式意味着Vue可以逐步集成到现有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值