ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

动态input绑定值

2022-01-26 14:32:36  阅读:123  来源: 互联网

标签:name age 绑定 mark key input 动态



<!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>

标签:name,age,绑定,mark,key,input,动态
来源: https://www.cnblogs.com/min77/p/15846393.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有