How to use vue.js to do component Loop traversal

enter content in one of the input boxes, and all three input boxes will be the same, but what you want is that the input in each input box can be unique. It is hoped to achieve this (three counters, independent of each other. Each counter has an add and subtract button. And there is a total count button, click to get the sum of the three counters)

the environmental background of the problems and what methods you have tried

<ul id="vfor">
    <li v-for="(item,index) in 3">
        <input type="number" v-model="message" min="1">
        <select v-model="ope" >
            <option value="0">+</option>
            <option value="1">-</option>
            <option value="2">*</option>
            <option value="3">/</option>
        </select>
        <input type="number" v-model="message1" min="1">
        <input type="button" @click="res(index)" value="=">
        <span>{{message2}}-{{index}}</span>
    </li>
</ul>

new Vue ({

        el:"-sharpvfor",
        data:{
                ope:"0",
                message:"0",
                message1:"0",
                message2:"0",
            },               
            methods:{
            res:function(index){
                if(this.ope=="0"){
                    this.message2=(this.message-0)+(this.message1-0)
                }
                    if(this.ope=="1"){
                    this.message2=(this.message-this.message1)
                }
                    if(this.ope=="2"){
                    this.message2=(this.message*this.message1)
                }
                    if(this.ope=="3"){
                    this.message2=(this.message/this.message1)
                }
        
            },
            }
})

< / script >

Apr.11,2021
Menu