<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>输入框绑定</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-for="(m, n) in arrSame" :key="n">
<label>{{ m.a +'：' }}</label>
<input v-model="m.b" />
</div>
<div v-for="(item, index) in arrDiff" :key="'l'+index">
<div v-for="m in Object.keys(item.y)" :key="m">
<label>{{ item.a +'：' }}</label>
<input v-model="item.y[m]" />
</div>
</div>
<div v-for="(item, n) in arrModel" :key="'m'+n">
<label>{{ item.a +'：' }}</label>
<input v-model="item[item.i]" />
</div>
<button @click="handleSure">确定</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data(){
return{
arrSame: [
{ a: '姓名', b: '' },
{ a: '标题', b: '' },
{ a: '年龄', b: '' }
],
arrDiff: [
{ a: '姓名', y: { name: ''}},
{ a: '标记', y: { mark: ''}},
{ a: '年龄', y: { age: ''}}
],
arrModel: [
{ a: '姓名', i: 'name' },
{ a: '标记', i: 'mark' },
{ a: '年龄', i: 'age' }
]
}
},
methods: {
handleSure() {
// 1、将对象中的属性b 作为绑定的key，则input获取到的值对应的key值都相同，通过对象中的其他属性分辨当前input的作用或说明。
console.log('arrSame == ', JSON.stringify(this.arrSame))
// [{"a":"行1","b":"11"},{"a":"行2","b":"22"},{"a":"行3","b":"33"}]
// 将对象里面的属性作为input绑定的key，通过Object.keys进行获取到具体的key，则input获得的值会直接对应y对象的key。
// 即通过对象中不同的属性可以分辨出输入框的类型，则获取的值对应不同的属性，各自说明和取值。
console.log('arrDiff == ', JSON.stringify(this.arrDiff))
// [{"a":"row1","y":{"name":"4"}},{"a":"row2","y":{"mark":"5"}},{"a":"row3","y":{"age":"6"}}]
// 将I的值作为input绑定的key，则结果数据会将输入input的值映射为该key对应的值，增加一组新的键值对。
// 即相当于i作为说明，i的值为key，input录入的值为i[key]的值
console.log('arrModel == ', JSON.stringify(this.arrModel))
// [{"a":"col1","i":"name","name":"w"},{"a":"col2","i":"mark","mark":"s"},{"a":"col3","i":"age","age":"x"}]
}
}
})
</script>
</body>
</html>
