|
|
|
|
步骤 2 : 再看看 computed 的做法 步骤 3 : methods 也能达到一样的效果 步骤 4 : computed 和 methods 的区别
先看不用 computed ，直接在 {{}} 上运行
{{ rmb/exchange }} <script src="https://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>人民币</td>
<td>美元</td>
</tr>
<tr>
<td align="center" colspan="2">
汇率： <input type="number" v-model.number="exchange" />
</td>
</tr>
<tr>
<td align="center">
￥: <input type="number" v-model.number = "rmb" />
</td>
<td align="center">
$: {{ rmb/exchange }}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0
}
})
</script>
如果运算过程比较复杂，那么维护起来就比较麻烦。
{{ rmb/exchange }} 所以可以把运算过程，都放在computed里去，只用显示运算结果就好了。 {{ dollar }} <script src="https://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>人民币</td>
<td>美元</td>
</tr>
<tr>
<td align="center" colspan="2">
汇率： <input type="number" v-model.number="exchange" />
</td>
</tr>
<tr>
<td align="center">
￥: <input type="number" v-model.number = "rmb" />
</td>
<td align="center">
$: {{ dollar }}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0
},
computed:{
dollar:function() {
return this.rmb / this.exchange;
}
}
})
</script>
methods 也能达到一样的效果，调用的时候，要加上括号
{{ getDollar() }} <script src="https://how2j.cn/study/vue.min.js"></script>
<style>
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
</style>
<div id="div1">
<table align="center" >
<tr class="firstLine">
<td>人民币</td>
<td>美元</td>
</tr>
<tr>
<td align="center" colspan="2">
汇率： <input type="number" v-model.number="exchange" />
</td>
</tr>
<tr>
<td align="center">
￥: <input type="number" v-model.number = "rmb" />
</td>
<td align="center">
$: {{ getDollar() }}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0
},
methods:{
getDollar:function() {
return this.rmb / this.exchange;
}
}
})
</script>
computed 是有缓存的，只要rmb没有变化，dollar 会直接返回以前计算出来的值，而不会再次计算。 这样如果是复杂计算，就会节约不少时间。
而methods每次都会调用
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
