<!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>