這篇文章要跟大家介紹的內容是關於Vue中計算屬性的用法（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
計算屬性是個很好玩的東西，在這裡面可以對資料模型進行操作，·也可以使用getter，setter方法。使用的話也是非常的簡潔明了
這裡寫個例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="js/vue.min.js"></script>-->
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
总价：{{prices}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
package1:[
{
name:'iPhone 7',
price:7199,
count:2
},
{
name:'iPad',
price:2888,
count:1
}
],
package2:[
{
name:'apple',
price:3,
count:5
},
{
name:'Banana',
price:2,
count:10
}
]},
computed:{
prices:function () {
var prices=0;
for(var i=0;i<this.package1.length;i++){
prices+=this.package1[i].price*this.package1[i].count;
}
for (var i=0;i<this.package2.length;i++){
prices+=this.package2[i].price*this.package2[i].count;
}
return prices;
}
}
})
</script>
</body>
</html>在computed屬性裡面定義一個計算price的方法，然後對data裡面的東西進行操作
下面看一下運行結果：
#然後再看看如何使用getter、setter方法：
#<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
姓名：{{fullname}}
</div>
<script>
var app=new Vue({
el:'#app',
data:{
firstName:'Jack',
lastName:'Green'
},
computed:{
fullname:{
//getter，用于读取
get:function () {
return this.firstName+ ' '+this.lastName;
},
//setter
set:function (newValue) {
var names=newValue.split(' ');
this.firstName=names[0];
this.lastName=names[names.length-1];
}
}
}
})
</script>
</body>
</html>展現出來的效果是這樣的
#也是比較簡單的用法，在購物模型裡面還有金融運算類別的應用裡面應該用的比較多這個屬性
相關文章推薦：
以上是關於Vue中計算屬性的用法（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
