計算屬性：computed
偵聽器（監(jiān)聽器）：watch
1.計算屬性
data屬性和computed屬性定義的值都可以綁定在表達(dá)式中学歧。如果某些值需要通過計算才能得到蔬将，那可以使用計算屬性具则。多個值的改變，為了得到一個結(jié)果磕蛇，使用計算屬性钾唬。
綁定在表達(dá)式中
<template>
<div>
<h1>計算屬性與監(jiān)聽器</h1>
<p>{{title}}</p>
<p>{{massage}}</p>
</div>
</template>
<script>
export default {
data(){
return{
title:'hello world'
}
},
computed:{
massage(){
return"hello body"
}
}
}
</script>
<style scoped>
</style>
png
計算總計
<template>
<div>
<h1>計算屬性與監(jiān)聽器</h1>
<p>計算總價=數(shù)量*單價*折扣</p>
<p>單價：{{price}}</p>
<p>
<button @click="sub">-</button>
{{quality}}
<button @click="add">+</button>
</p>
<p>折扣：{{discount}}</p>
<p>總價：{{num}}</p>
</div>
</template>
<script>
export default {
data(){
return{
price:"20", //單價
quality:0, //數(shù)量
discount:0.7 //折扣
}
},
computed:{
num(){
return this.price * this.quality * this.discount;
}
},
methods:{
sub(){
if(this.quality>0){
this.quality--
}
},
add(){
this.quality++
}
}
}
</script>
<style scoped>
</style>
運(yùn)行結(jié)果
png
2.偵聽器
一個值變化，會影響多個值（或處理多件事）偏化，使用偵聽器脐恩。
<template>
<div>
<h1>計算屬性與監(jiān)聽器</h1>
<p>計算總價=數(shù)量*單價*折扣</p>
<p>單價：{{price}}</p>
<p>
<button @click="sub">-</button>
{{quality}}
<button @click="add">+</button>
</p>
<p>折扣：{{discount}}</p>
<p>總價：{{num}}</p>
</div>
</template>
<script>
export default {
data(){
return{
price:"20", //單價
quality:0, //數(shù)量
discount:0.7, //折扣
num :0, //總價
}
},
watch:{
quality(val){
this.num=this.price * val * this.discount; //數(shù)量變成val值
}
},
methods:{
sub(){
if(this.quality>0){
this.quality--
}
},
add(){
this.quality++
}
}
}
</script>
<style scoped>
</style>
png
