使⽤v-for绑定多个input输⼊框<template>
<div class="layout-center">
<ul class="nodot">
input框禁止输入
<li  v-for="(item,index) in todo" :key="item.id">⾯额 {{item.value}}:
<input  @input="inputClick()"
v-model= AmountList[index] class="input_box"/>张数⼩计⾦额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" class="input_box"></p>
</div>
</template>
<script>
export default {
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
watch:{
AmountList () {
let sum =0;
for( let i =0; i < this.AmountList.length; i++ ) {
sum += this.AmountList[i] * do[i].value;
}
}
},
computed:{
//通过computed get 属
amountTotal: {
//getter
get: function(){
let sum = 0;
for( let i = 0; i < this.AmountList.length; i++ ) {
sum += this.AmountList[i] * do[i].value;
}
return sum;
}
},
msg: {
get:function(){
console.log("get")
return  "Get:" + ssage;
},
set: function(newVal){
console.log("set" +newVal)
}
}
},
methods:{
handleClick(){
console.log(this.AmountList)
},
inputClick () {
/
/通过@input计算总计
let sum =0;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。