計(jì)算屬性：用來處理復(fù)雜邏輯操作的
在Vue.js中有了計(jì)算屬性這種方法端朵，可以避免在模板中加入過度的業(yè)務(wù)邏輯莉钙，保證更好的結(jié)構(gòu)清晰和后期維護(hù)的效率
計(jì)算屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<div id='app'>
<h1>{{msg.split(' ').reverse().join('===')}}</h1>
<a href="#">{{revMsg}}</a>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({ el:'#app',
data:{ msg:'hello vue' },
methods:{}, filters:{}, computed:{ revMsg:function(){ return this.msg.split(' ').reverse().join('*'); } } })
</script>
</body>
</html>
使用次數(shù)較多不便于后期維護(hù)因此用計(jì)算屬性可以起到更好的作用
這種方法修改的只是computed中的數(shù)據(jù)
案例：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>計(jì)算屬性</title>
</head>
<body>
<div id='itany'>
<button @click='add'>加貨</button>
<h1>總價(jià)為:{{total}}</h1> </div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({ el:"#itany",
data:{ package1:{count:5,price:3},
package2:{count:8,price:4} },
computed:{
total:function(){ return this.package1.countthis.package1.price+this.package2.countthis.package2.price } },
methods:{ add:function(){ this.package1.count++; }
}
})
</script>
</body>
</html>
作者：晚霞依舊在
鏈接：http://www.reibang.com/p/0ed61eb25353
來源：簡書
簡書著作權(quán)歸作者所有秃殉，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處姥份。
