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