Vue.js 计算属性
在Vue.js中，当我们必须处理复杂的逻辑和运算时，将使用计算属性。计算属性就像方法一样，但有一些区别。
在前面的示例中，我们已成功使用模板内表达式。它们非常方便，但是模板内表达式主要用于简单操作。如果您必须在模板中添加沉重而复杂的逻辑，则它可能会肿且难以维护。
例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这里您可以看到模板不像以前那样简单和声明性。它看起来更加复杂，您必须先仔细查看一下，然后才能意识到它以相反的方式显示消息。当您必须在模板中重复使用反向消息时，此问题可能会变得更加严重。
让我们举一些简单的示例来使计算属性的概念清晰易懂。这也使您能够决定何时使用方法以及何时使用计算属性。
请参阅以下示例以了解计算属性的概念:
Example1
index.html文件:
<html>
<head>
<title>Vue.js Computed Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="com_props">
This is the Original message:<h2> {{ message }}</h2>
This is the Computed reversed message: <h2> {{ reversedMessage }}</h2>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#com_props',
data: {
message: 'Hello lidihuo'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
我们使用一个简单的CSS文件使输出更具吸引力。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
示例说明
在上面的示例中，我们声明了计算属性
reversedMessage 。这里提供的函数用作属性reversedMessage的获取函数。
reversedMessage 的值始终取决于
message 属性的值。
data: {
message: 'Hello lidihuo'
},
computed: {
// a computed getter
reversedMessage: function () {
示例2
再举一个示例。在此示例中，您可以在表单结构中输入数据并查看计算机属性的结果。请参见以下示例:
Index.html文件:
<html>
<head>
<title>Vue.js Computed Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "com_props">
FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
<h2>My name is {{firstname}} {{lastname}}</h2>
<h2>Retrieve name by using computed property : {{getfullname}}</h2>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#com_props',
data: {
firstname :"",
lastname :"",
birthyear : ""
},
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
})
我们使用一个简单的CSS文件使输出更具吸引力。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
示例说明
在上面的示例中，我们创建了两个名为
名字和
姓氏。这些文本框使用属性
firstname 和
lastname 绑定。
现在，我们调用了计算方法getfullname，该方法返回输入的名字和姓氏。
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
当我们在文本框中键入内容时，函数在属性的名字或姓氏更改后返回相同的值。因此，在计算的帮助下，我们不必做任何特定的事情，例如记住要调用一个函数。有了计算属性，它便会作为更改内部使用的属性(即名字和姓氏)本身被调用。
方法与计算属性之间的区别
在以上示例中，我们了解了计算属性。现在，让我们了解方法和计算属性之间的区别。我们知道这两个都是对象，并且内部定义了一些函数，这些函数返回一个值。
对于计算属性，对于方法，我们将其称为属性，对函数而言，将其称为函数。让我们看一个示例，了解方法和计算属性之间的区别。
Index.html文件:
<html>
<head>
<title>Vue.js Computed Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "com_props">
<h2 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h2>
<h2>Random No from method: {{getrandomno1()}}</h2>
<h2 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h2>
<h2 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h2>
<h2>Random No from method: {{getrandomno1()}}</h2>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#com_props',
data: {
name : "helloworld"
},
methods: {
getrandomno1 : function() {
return Math.random();
}
},
computed :{
getrandomno : function(){
return Math.random();
}
}
})
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
示例说明
在上面的示例中，我们创建了一个名为
getrandomno1 和函数名称为
getrandomno 的计算属性。在此示例中，我们使用
Math.random()来获取随机数形式的结果。我们多次调用了方法和计算属性以查看其区别。
在这里，您可以看到，从计算属性返回的随机数每次都保持不变，而与被调用的次数无关。 。这意味着每次调用它；最后一个值将全部更新。另一方面，对于方法来说，它是一个函数，因此每次调用它都会返回一个不同的值。
Vue.js计算属性中的获取/设置
让我们看看如何在
Vue.js 计算属性中使用get/set函数。请参见以下示例:
Index.html文件:
<html>
<head>
<title>Vue.js Computed Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "com_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#com_props',
data: {
firstName : "Alex",
lastName : "Junior"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
}
}
}
})
程序执行后，您将看到以下输出:
输出:
在上面的示例中，我们定义了一个绑定到全名的计算属性输入框。它返回一个名为get的函数并给出全名作为输出，即名字和姓氏。
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
现在，您可以看到，如果您在文本框中更改名称，结果将不会反映在输出中。参见下图。
输出:
要解决此问题，我们必须在全名计算属性中添加
setter函数。
在全名中添加以下set函数计算属性:
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split("");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}
请参见以下示例:
Index.html文件:
<html>
<head>
<title>Vue.js Computed Property</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "com_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#com_props',
data: {
firstName : "Alex",
lastName : "Junior"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split("");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}
});
程序执行后，您将看到以下输出:
输出:
现在，如果在运行代码后编辑文本框，则更新的名称将显示在浏览器。由于
设置功能，此处的名字和姓氏已更新。 get函数返回名字和姓氏，而set函数则在文本框中进行任何编辑时对其进行更新。
编辑后查看输出。
输出:
