|
|
|
|
步骤 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公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2020-07-16
鼠标滑轮效果失效
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-07-15
站长又在其中里动了小手脚
3 个答案
VisualMike 跳转到问题位置 答案时间：2021-02-18 是HTML 5 input 标签的type属性为number所致，在Chrome上可看出上下调节按钮
鲛人曙 跳转到问题位置 答案时间：2020-07-27 应该是浏览器兼容问题吧。对不同标签和类型的支持不同导致的。
HOW2J丶小灰灰 跳转到问题位置 答案时间：2020-07-16 代码复制到sublime 浏览器打开 ，鼠标滑轮 增减数字的效果 就失效了。 点击上下键还可以。在站长的页面 测试滑轮也有效果。 大佬知道为什么吗
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2019-04-25
验证computed缓存
2018-12-24
method与methods？？？
2018-07-19
这里的标题是method还是methods？
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
