购物车各种计算方法watch,computer（v-for循环计算多个input的值）

<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 
    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:{
        //通过computed get 属 
        amountTotal: {
            //getter
            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 () {
            //通过@input计算总计 
            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：