<body>
<div id="app">
<!-- {{}}中的内容可以是data中的数据，也可以是表达式 -->
<!-- 对于元素中绑定的内容，如果是简单的计算，可以直接使用表达式进行绑定 -->
<!-- 而如果是复杂的计算(例如根据工资计算个人所得税) 就没有办法通过一个简单的表达式绑定 -->
<label for="">工资</label>
<input type="text" placeholder="请输入您的工资" v-model="salary">
<p>
您的个人所得税为
<!-- {{}}中可以绑定表达式，所以就绑定组件中的方法调用，得到的是方法的返回值 -->
<span>{{comTax}}</span>,
<span>{{comTax}}</span>,
<span>{{comTax}}</span>
</p>
<hr>
<input type="text" v-model="">
<!-- 计算结果只读 -->
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
salary:0,
},
methods:{
// 在页面中绑定的数据有时不是直接的变量，而是通过标量衍生出的一些结果，如果是简单的计算，可以直接绑定表达式，如果是复杂的计算，则可以将计算过程写成一个method，然后绑定方法调用。
tax(){
console.log("计算执行了");
// 在methods中也可以使用计算结果
return this.comTax;
}
},
// 在页面中绑定方法调用，如果绑定了多次，那么方法也会被执行多次，而每次的结果又一样，所以多次调用是没有必要的，所以在vue组件中，增加了计算结果(computed)这一功能 来解决这个问题。
// computed，设置组件的计算结果，和methods类似，其中写方法，和methods不同的是，计算结果中的内容使用时不需要添加(),计算结果的名字不能和data一级methods中的名字重复。
computed:{
comTax(){
// computed中的函数必须有返回值，
// computed函数中的this也是组件对象本身
// 相比methods方法调用的绑定，computed中的函数只执行一次，避免浪费，直到computed中使用的数据发生变化，才会再次调用。
console.log("计算结果执行了");
return this.salary*0.2;
},
asd(){
// 在计算结果中可以使用本组件的其他计算结果
return this.comTax*0.3;
}
}
})
</script>
</body>