vue实现多行的独立的，自动数据换算，现在没法区分开，请问该怎么弄？


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
   <body>
      <ul id="ul">
			<li v-for="index in sites"  :id="forId(index)">
				千米 : <input type = "text" v-model = "kilometers">
				 米 : <input type = "text" v-model = "meters">
				 {{ index }}
			</li>
			<button id="btn" @click="add">添加</button>
		</ul>
<script>

var vm1 = new Vue({
	el: '#ul',
	data: {
		sites:1,
		kilometers : '',
		meters:''
	},
	methods: {
		forId:function(index){
			return "forid_" +index
			},
		add:function(){
			var sites = this.sites;
			sites++;
			this.sites = sites;
			console.log(sites);
		  }
		},
		watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
});

</script>
   </body>
</html>

现在所有行的数据都是同步的，想实现每一行的数据不同，也能自动计算

那你 input 也得独立才行你需要给数据加两个属性来记录当前行的数据， input v-model index.属性即可

把你要换算的所有放到一个数组中，然后遍历数组，[{kilometers:'',meters:''},....]。v-model=“arr[index].kilometers”

千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">

你v-model的值都是一样的，不管你循环出来多少个 input，肯定值都是一样的啊，你把 input 的值也循环绑定一下