<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model.number="a">
<input type="text" v-model.number="b">
<button @click="handleCount()">點擊</button>
<button @click="handle()">對比</button>
<h4>methods:-----{{c}}</h4>
<h4>computed:-----{{count}}</h4>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
a:"",
b:"",
c:""
},
methods:{
handleCount(){
console.log("點擊事件執行了")
this.c = this.a + this.b;
},
handle(){
this.handleCount();
console.log( this.count)
}
},
computed:{
count(){
console.log("computed執行了");
return this.a + this.b
}
}
})
/*
計算屬性:computed
通過屬性計算而得來的屬性
1、computed對象里面都是函數，函數的名稱隨便定義
2、函數的執行是依賴data中的屬性，當屬性發生變化的時候當前函數就會執行
3、盡量不要在computed中操作修改data中的屬性
4、computed里面的函數必須要返回一個值
5、computed里面的函數調用是不需要加()的
6、當data中的屬性沒有發生改變的時候，如果調用computed里面的函數的話，是不會執行的，而是會從緩存中讀取最后的一次結果
computed與watch的區別，以及使用的場景？
1、場景：
什么時候會使用computed？當一個屬性受多個屬性影響的時候用computed 購物車的總結結算
*/
</script>
