<template
>
<div
class="layout-center">
<ul
class="nodot">
<li v
-for="(item,index) in todo" :key
="item.id">面额
{{item
.value
}}:
<input @input
="inputClick()"
v
-model
= AmountList
[index
] />张数 小计金额
CNY:{{handleAmount(index
)}}</li
>
</ul
>
<button @click
="inputClick">获取张数
</button
>
<!-- watch计算
-->
<p
>通过 watch 总计金额：
{{total
}}</p
>
<!-- computed计算
-->
<p
>通过 computed 总计金额：
{{amountTotal
}}</p
>
<!-- @input
-->
<p
>通过 @input 总计金额：
{{valueTotal
}}</p
>
<p
>message
: <input type
="text" v
-model
="message"></p
>
<p
>测试
set get <input type
="text" v
-model
="msg" ></p
>
</div
>
</template
>
<script
>
export default {
name
:'Computer',
data () {
return {
todo
: [{id
:"1",value
:10}, {id
:"2", value
:20}, {id
:"3", value
:50}, {id
:"4", value
:100}],
AmountList
: [0,0,0,0],
total
: 0,
valueTotal
: 0,
message
:""
}
},
watch
:{
AmountList () {
let sum
=0;
for( let i
=0; i
< this.AmountList
.length
; i
++ ) {
sum
+= this.AmountList
[i
] * this.todo
[i
].value
;
}
this.total
= sum
;
}
},
computed
:{
amountTotal
: {
get: function(){
let sum
= 0;
for( let i
= 0; i
< this.AmountList
.length
; i
++ ) {
sum
+= this.AmountList
[i
] * this.todo
[i
].value
;
}
return sum
;
}
},
msg
: {
get:function(){
console
.log("get")
return "Get:" + this.message
;
},
set: function(newVal
){
console
.log("set" +newVal
)
}
}
},
methods
:{
handleClick(){
console
.log(this.AmountList
)
},
inputClick () {
let sum
=0;
for( let i
=0; i
< this.AmountList
.length
; i
++ ) {
sum
+= this.AmountList
[i
] * this.todo
[i
].value
}
this.valueTotal
= sum
;
},
handleAmount(index
){
return this.AmountList
[index
] * this.todo
[index
].value
;
}
}
}
</script
>
<style scoped
>
</style
>
watch只能监听一个数据，另一个数据改变，也就是例子中的金额不变，改变数量，小计金额随着变，要想金额和数据都改变，则要结合watch和computer 例2：
