一丐谋、計(jì)算屬性
計(jì)算屬性中定義的值可以直接綁定在表達(dá)式中闸婴。如果某些值需要通過計(jì)算才能得到飞醉，那使用計(jì)算屬性就再合適不過了膀跌。
1<template> 2<div> 3<h1>{{fullTitle}}</h1> 4<h2>{{title}}</h2> 5</div> 6</template> 7 8export default { 9? ? data(){10? ? ? ? return {11? ? ? ? ? ? title:"hello world"12? ? ? ? }13? ? },14? ? computed:{15? ? ? ? fullTitle(){16? ? ? ? ? ? return "融職教育-" + this.title17? ? ? ? }18? ? }19}
在上面的示例代碼中fullTitle的值是通過title屬性計(jì)算而來，所以可以通過computed獲得計(jì)算的結(jié)果固灵，并綁定到表達(dá)式中捅伤。
但是這個(gè)例子并沒有說服力，我們還可以用很多其他方法來實(shí)現(xiàn)這個(gè)功能巫玻，那我們再來制作一個(gè)計(jì)數(shù)器效果丛忆，讓computed屬性發(fā)揮它的作用。
1<template> 2<div id="app"> 3<div>單價(jià){{price}}</div> 4<div> 5<button @click="sub">-</button> 6<span>{{count}}</span> 7<button @click="add">+</button> 8</div> 9<div>總價(jià)：{{totalPrice}}</div>10</div>11</template>
我們在之前的實(shí)例中仍秤，在data屬性中定義了三個(gè)變量：price熄诡、count、totalPrice诗力。
利用計(jì)算屬性可以簡化這個(gè)示例：
1exportdefault { 2name: 'app', 3? data(){ 4return { 5name:"xiaoming", 6count:0, 7price:15 8? ? } 9? },10? computed:{11? ? totalPrice(){12returnthis.count *this.price13? ? }14? },15? methods:{16? ? add(){17this.count++18? ? },19? ? sub(){20this.count--21? ? }22? }23}
二凰浮、偵聽屬性
偵聽屬性可以實(shí)時(shí)監(jiān)控一個(gè)屬性的變化，如果這個(gè)值發(fā)生變化了苇本，可以執(zhí)行某些操作袜茧，我們用偵聽器來改寫上面的計(jì)數(shù)器功能，示例代碼如下所示
1exportdefault { 2name: 'app', 3? data(){ 4return { 5name:"xiaoming", 6count:0, 7price:15 8? ? } 9? },10? watch:{11? ? count(newValue,oldValue){12? ? ? console.log(newValue)13? ? ? console.log(oldValue)14this.totalPrice = newValue *this.price15? ? },16? }, 17? methods:{18? ? add(){19this.count++20? ? },21? ? sub(){22this.count--23? ? }24? }25}
三瓣窄、計(jì)算屬性與偵聽屬性對比
如果關(guān)注的是一個(gè)變量的結(jié)果笛厦，使用計(jì)算屬性；如果關(guān)注一個(gè)變量的改變會(huì)導(dǎo)致一系列行為俺夕，使用偵聽屬性裳凸。
四贱鄙、課后練習(xí)
使用表格制作一個(gè)購物清單，商品列表數(shù)據(jù)如下
1[2{"name":"香蕉","price":3.14},3{"name":"蘋果","price":2.25},4{"name":"鴨梨","price":6}5]
功能如下所示
通過計(jì)數(shù)器選擇購物清單數(shù)量
根據(jù)數(shù)量和單價(jià)計(jì)算總價(jià)
