计算属性
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了计算属性相关的知识，希望对你有一定的参考价值。
1.简单使用
在某些情况下，我们需要对数据进行转化之后再显示
我们就要用到计算属性
这个属性是写在实例的computed选项中的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 代码不简洁-->
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<!-- 利用计算属性-->
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
firstName: 'Bill',
lastName: 'Gates',
},
computed: {
fullName : function () {
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
</html>
2.复杂操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>总价：{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
books: [
{id: 110, name: '计算机操作系统', price: 119},
{id: 111, name: '计算机组成原理', price: 69},
{id: 112, name: '数据结构', price: 88},
{id: 113, name: '代码大全', price: 39},
]
},
computed: {
totalPrice: function () {
let result=0;
for(let i in this.books)
result += this.books[i].price;
return result;
}
}
})
</script>
</body>
</html>
3.计算属性的getter和setter
上面的计算属性fullname的写法是简写
下面的是完整的写法
//计算属性一般是没有set方法，只读属性
fullName: {
set: function(){
},
get: function () {
return this.firstName + ' ' + this.lastName
}
}
4.计算属性和method的对比
虽然也可以用methods来做
<h2>{{getFullName()}}</h2>
...
methods: {
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
}
但是用computed的好处在于：
computed在Vue中是有缓存的，体现在如果我现在要显示多个相同的fullname
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
<h2>{{getFullName()}}</h2>
使用methods的话，会调用多次方法
而使用computed的话，只需要调用一次，因为它有缓存，发现每次显示的都一样就不再调用了。
以上是关于计算属性的主要内容，如果未能解决你的问题，请参考以下文章