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

最新推荐文章于 2025-10-20 18:16:11 发布

原创最新推荐文章于 2025-10-20 18:16:11 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

这篇文章展示了一个使用Vue.js进行动态表单元素渲染和数据绑定的代码片段。它涵盖了文本输入、文本区域、复选框和单选按钮等多种表单类型，并在提交时显示所填信息。示例中，`v-for`用于循环遍历数据，`v-model`实现双向数据绑定，允许根据用户输入更新数据。

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

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

运行结果