在此基础上增加一个按钮点击新增一条输入框
时间: 2024-03-12 15:48:03 浏览: 39
如果您想要实现点击按钮后新增一条输入框,可以在页面中定义一个变量,用来保存输入框的数量,每次点击按钮后将数量加一,然后通过 `v-for` 指令动态渲染多个输入框。
示例代码如下:
```
<template>
<div>
<u-form>
<u-form-item label="本期总结" prop="ScheduleBegin" :required="true" :borderBottom="true" ref="item1" inline="false">
<view class="thisweek">
<!-- 左侧的表单控件 -->
</view>
</u-form-item>
<u-form-item label="" prop="" :required="false" :borderBottom="true" ref="item2" v-for="(item, index) in inputList" :key="index">
<view class="thisweek">
<u-input v-model="item.sex" disabledColor="#ffffff" :placeholder="'请输入性别' + (index + 1)" border="none" />
</view>
</u-form-item>
</u-form>
<u-button @click="addInput">新增输入框</u-button>
</div>
</template>
<script>
export default {
data() {
return {
inputList: [{ sex: '' }], // 输入框列表,初始值为一个空对象
}
},
methods: {
addInput() {
this.inputList.push({ sex: '' }) // 点击按钮后新增一个输入框
},
},
}
</script>
```
在上面的代码中,`inputList` 变量保存了输入框的列表,初始值为一个空对象。当用户点击新增按钮时,会触发 `addInput` 方法,方法会向 `inputList` 中添加一个空对象,并重新渲染页面。通过 `v-for` 指令可以动态渲染多个输入框,每个输入框都会绑定到 `inputList` 中的一个对象上。