vue之动态绑定v-model(封装公共的查询组件)

人狠话不多,直接上代码,直接复制粘贴就可以使用。

Java_小小白

2304人浏览 · 2023-05-30 15:40:11

Java_小小白 · 2023-05-30 15:40:11 发布

人狠话不多,直接上代码,直接复制粘贴就可以使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<div id="app">
			<div v-for="(item,index) in message">
				{{item.label}}
				<input v-if="item.type == 'text' || item.type == 'number' || item.type == 'email' || item.type == 'phone'" type="text" :disabled="item.required" v-model="item.vModel[item.vModel1]"/>
				<textarea v-else-if="item.type == 'textarea'" :disabled="item.required" v-model="item.vModel[item.vModel1]"></textarea>
				<span v-else-if="item.type =='checkbox'">
					<span v-for="(ck,index) in item.data">
						{{ck}}<input type="checkbox" :disabled="item.required" v-model="item.vModel[item.vModel1]"/></label>
					</span>
				</span>
				<span v-else-if="item.type =='radio'">
					<span v-for="(rd,index) in item.data">
						{{rd}}<input type="radio" :disabled="item.required" v-model="item.vModel[item.vModel1]"/></label>
					</span>
				</span>
				<div style="margin-top: 20px;"></div>
			</div>
			
			<button @click="submit">提交</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
		</script>
		<script>
			var vm = new Vue({
				el: '#app',
				//原数据
				/*data: {
					message: [{
						label: '姓名',
						type: 'text',
						required: false,
						vModel:'name'
					}, {
						label: '电话',
						type: 'phone',
						required: true,
						vModel:'phone'
					}, {
						label: '邮箱',
						type: 'email',
						required: false,
						vModel:'email'
					}, {
						label: '数字',
						type: 'number',
						required: true,
						vModel:'amount'
					}, {
						label: "爱好",
						type: 'checkbox',
						required: false,
						data: ["上网", "旅游", "篮球", "跑步"],
						vModel:'hobby'
					}, {
						label: '性别',
						type: 'radio',
						required: false,
						data: ["男", "女"],
						vModel:'sex'
					}, {
						label: '问题',
						type: 'textarea',
						required: true,
						vModel:'question'
					}]
				},*/
				//处理完成的数据
				//注意用原生的写爱好,性别这种v-model不能写一个
				data: {
					message: [{
						label: '姓名',
						type: 'text',
						required: false,
						vModel1:'name',
						vModel: {name:''}
					}, {
						label: '电话',
						type: 'phone',
						required: false,
						vModel1:'phone',
						vModel: {phone:''}
					}, {
						label: '邮箱',
						type: 'email',
						required: false,
						vModel1:'email',
						vModel: {email:''}
					}, {
						label: '数字',
						type: 'number',
						required: false,
						vModel1:'amount',
						vModel: {amount:''}
					},  {
						label: '问题',
						type: 'textarea',
						required: false,
						vModel1:'question',
						vModel: {question:''}
					}]
				},
				methods: {
					submit(){
						console.log(this.message)
						this.message.forEach((item,inedx)=>{
							alert(item.vModel[item.vModel1])
						})
					}
				}
			});
		</script>
	</body>

</html>

运行结果

MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

【CodeBuddy + 自制MCP】给AI装上翅膀，快速绘制思维导图

MCP技术社区

如何将普通HTTP API接口改造为MCP服务器

创建.proto通过本文的四步改造法，你可获得：✅ 配置更新延迟降低90%✅ 网络带宽消耗减少70%✅ 服务端资源占用下降60%✅ 原生支持百万级节点连接升级到MCP不仅是协议转换，更是配置分发模式的架构进化。立即行动，让你的微服务配置管理进入实时推送时代！更多Istio进阶技巧请关注专栏【Service Mesh深度实践】