v-model与v-model

最新推荐文章于 2024-03-31 12:06:11 发布

原创最新推荐文章于 2024-03-31 12:06:11 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #小程序 #html

vue 同时被 3 个专栏收录

13 篇文章

订阅专栏

uniapp

3 篇文章

订阅专栏

小程序

3 篇文章

订阅专栏

本文分享了在uniapp小程序开发中使用v-model与:v-model创建动态表单时遇到的问题，强调了它们在双向绑定和数据控制上的区别，为初学者提供避免踩坑的实用经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                           ###   v-model与:v-model

                           ###   在 uniapp开发小程序中动态添加form表单项的踩坑日记

代码如下:

//原始项
<view class="center_box" v-for="(item,index) in arr" :key="index">
					<view class="top">
						<view class="top_left">
							<input type="text" value="" v-model="item.person" :placeholder=" '请选择人员'+(index+1) "
								placeholder-style="color:black;" />
						</view>
						<view class="top_right">
							<input type="text" value="" v-model="item.document" placeholder="请选择工作流程"
								placeholder-style="color:black;" />
						</view>
					</view>
					<view class="bottom">
						<input type="text" value="" v-model="item.plan" placeholder="填写明天工作计划"
							placeholder-style="color:black;" />
					</view>
				</view>


				//添加项
				<view class="add_item">
				<view class="top">
					<view class="top_left">
						<input type="text" value="+" v-model="datepicker" placeholder="+"
							placeholder-style="color:black;" @click="submit_m" />
					</view>
					<view class="top_right">
						<input type="text" value="" v-model="datepicker" />
					</view>
				</view>
			</view>

	//提交打印结果
		<view @click="submit" class="submitbtn"><label>发布任务</label></view>

				export default {
		data() {
			return {
				arr: [{
					person: '',
					document: '',
					plan: ''
				}],
				obj: {
					person: '',
					document: '',
					plan: ''
				}
			}
		},
		methods: {
		//添加项
			submit_m() {
				this.arr.push(this.obj)
				this.obj = {}
			},
			submit() {
				console.log(this.arr)
			}
		}
	}