對(duì)于Vue中計(jì)算屬性的用法（附代碼）
發(fā)表時(shí)間：2023-09-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]這篇文章給大家介紹的內(nèi)容是關(guān)于Vue中計(jì)算屬性的用法（附代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。計(jì)算屬性是個(gè)很好玩的東西，在這里面可以對(duì)數(shù)據(jù)模型進(jìn)行操作，·也可以使用getter，setter方法。使用的話也是非常的簡(jiǎn)潔明了這里寫個(gè)例子<!DOCTYP...
這篇文章給大家介紹的內(nèi)容是關(guān)于Vue中計(jì)算屬性的用法（附代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。
計(jì)算屬性是個(gè)很好玩的東西，在這里面可以對(duì)數(shù)據(jù)模型進(jìn)行操作，·也可以使用getter，setter方法。使用的話也是非常的簡(jiǎn)潔明了
這里寫個(gè)例子
<!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">
總價(jià)：{{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屬性里面定義一個(gè)計(jì)算price的方法，然后對(duì)data里面的東西進(jìn)行操作
下面看一下運(yùn)行結(jié)果：
然后再看一下如何使用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>展現(xiàn)出來的效果是這樣的
也是比較簡(jiǎn)單的用法，在購(gòu)物模型里面還有金融計(jì)算類的應(yīng)用里面應(yīng)該用的比較多這個(gè)屬性
相關(guān)文章推薦：
vue.js圖片如何轉(zhuǎn)Base64上傳圖片并預(yù)覽
vue中如何來定義全局變量和全局方法？（代碼）
以上就是關(guān)于Vue中計(jì)算屬性的用法（附代碼）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
