<!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>
動態input綁定值
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。