<!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>
现在所有行的数据都是同步的，想实现每一行的数据不同，也能自动计算
