个性化阅读
专注于IT技术分析

VueJS计算属性computed用法全解教程

在上一节中,我们学习了VueJS组件的用法,Vue的组件可以使用全局注册和本地注册,以及还可以使用动态组件。到此,我们已经学习了Vue实例和Vue组件的使用,在本节中,我们讨论更详细的Vue使用computed计算属性的内容,computed属性和methods类似,但是有一些不同,在下面的讨论中我们可以看到。在我们学完本节后,我们将可以知道什么时候该用methods什么时候该用computed。

1、VueJS自动计算属性computed

下面我们一起看一个使用computed的例子,HTML代码:

<!DOCTYPE html>
<html lang="zh_CN">
<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>VueJS计算属性computed</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="computed">
        昵称:<input type="text" v-model="nickname"/> <br/><br/>
        邮箱:<input type="text" v-model="email"> <br/><br/>
        <h1>我的昵称和邮箱为:{{nickname}} {{email}}</h1>
        <h1>使用computed计算属性:{{getfullinfo}}</h1>
    </div>
    <script src="js/computed.js"></script>
</body>
</html>

computed.js文件的代码如下:

var user = {};
user.nickname = "半瓶木";
user.email = "srcmini@163.com";
var v = new Vue({
    el: "#computed",
    data: user,
    computed: {
        getfullinfo: function(){
            return "[" + this.nickname + " " + this.email + "]"
        }
    }
});

在html文件中创建了两个文本输入框input,并分别使用v-model将文本框和nickname和email两个属性绑定。注意,v-model用于绑定属性。

在这里计算属性方法为getfullinfo,该方法返回输入的昵称和邮箱,如下代码:

computed: {
        getfullinfo: function(){
            return "[" + this.nickname + " " + this.email + "]"
        }
    }

当在输入框中输入内容时,nickname和email会被更新,相应地会通过该函数返回新的值。因而使用computed进行属性计算,我们不需要显式指定任何东西,例如不用手动调用方法(在methods中需要)。使用computed属性计算方法,当内部的属性值改变时,它会调用自身进行更新操作并返回值。

你可以使用上面的代码实现,在输入框中输入不同的内容时,下面的文本会跟着进行更新,下面是在浏览器中的显示效果:

使用computed自动计算属性

2、computed和methods的区别

下面我们来看一下自动计算属性computed和方法methods的区别,其中它们都是对象,都是在对象中定义一些方法,然后返回值。

在methods中我们可以将它称为方法(调用要加括号),而对象computed我们将其称为属性(因为使用时不需要按照方法调用的方式写,也就是不用加括号),使用下面的例子,我们来看看methods和computed的区别:

<div id = "diff">
         <h1 style = "background-color:gray;">来自computed的随机数: {{getrandomno}}</h1>
         <h1>来自methods的随机数: {{getrandomno1()}}</h1>
         <h1>来自methods的随机数 : {{getrandomno1()}}</h1>
         <h1  style = "background-color:gray;">来自computed的随机数: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">来自computed的随机数: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">来自computed的随机数: {{getrandomno}}</h1>
         <h1>来自methods的随机数: {{getrandomno1()}}</h1>
         <h1>来自methods的随机数: {{getrandomno1()}}</h1>
      </div>
    <script>
        var ex = new Vue({
            el: "#diff",
            data: {
                name: "VueJS"
            },
            methods: {
                getrandomno1: function(){
                    return Math.random();
                }
            },
            computed: {
                getrandomno: function(){
                    return Math.random();
                }
            }
        });
    </script>

在上面的代码中,我们创建了一个在methods中的方法getrandomno1,以及在computed中的属性getrandomno,它们都是使用Math.random()函数返回随机数。

下面是在浏览器中的显示效果,computed属性和methods方法被调用了好几次:

computed和methods的区别

从上面的显示我们可以看到,调用多次computed属性返回的随机数都是相同的,与调用次数无关,而使用methods中的方法则每次显示的随机数都不同。因为每次对于methods中的方法来说,它们都是方法,自然每次调用都会返回不同的值。而对于computed来说,它相当于一个属性,自然每次都是取到相同的值,它只有在内部发生改变时,才会重新调用该方法更新值。

3、自动计算属性computed中的get和set函数

在这个小节中,我们将会学习computed中的get和set函数,下面我们看一个例子:

<div id="app">
        <input type="text" v-model="account"/>
        <h1>{{firstname}}</h1>
        <h1>{{lastname}}</h1>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                firstname: "Van Gogh",
                lastname: "La Oreja De"
            },
            methods: {},
            computed: {
                account: {
                    get: function(){
                        return this.lastname + " " + this.firstname;
                    }
                }
            }
        });
    </script>

上面的代码中,我们定义了一个输入框,使用v-model将这个输入框和account绑定,在这里account是一个计算属性,它返回一个叫get的函数,提供firstname和lastname的拼接。并且定义两个h1使用表达式显示这两个属性。

这里是使用了v-model绑定了输入框和account,当时,当输入框中的值改变时,下面的两个h1不会跟着更新,显示如下:

computed计算属性get的使用

下面的代码在computed计算属性中添加set函数:

set: function(name){
                        var fname = name.split(" ");
                        this.firstname = fname[0];
                        this.lastname = fname[1];
                    }

其中参数name为输入框中的文本,当运行该代码时,因为set函数提供了更新操作,所以当你输入文本时,下面的两个h1会进行相应的更新,像第一个例子那样。

赞(0) 打赏
未经允许不得转载:srcmini » VueJS计算属性computed用法全解教程
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏