怎么用vue.js做组件循环遍历

Question

在其中一个输入框里面输入内容，三个输入框就会都输入进去，并且相同，但是想要的是每个输入框输入的内容都可以唯一。就是希望实现这种（3个计数器，互相独立。每个计数器有加减按钮。并且有一个总的计数按钮，点击得到三个计数器的和）

问题出现的环境背景及自己尝试过哪些方法

<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:"#vfor",
        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>

Answer 1

http://www.mamicode.com/info-...