vue+element实现点击按钮新增一个盒子里面有两个input框
时间: 2024-01-31 07:04:05 浏览: 29
好的,我可以帮你解答。
首先,在 Vue 中,你需要使用组件来实现 UI,Element UI 是一个非常流行的 UI 组件库,可以方便地实现你的需求。下面是一个示例代码:
```vue
<template>
<div>
<el-button @click="addBox">新增盒子</el-button>
<div v-for="(box, index) in boxes" :key="index">
<el-input v-model="box.name" placeholder="请输入名称"></el-input>
<el-input v-model="box.value" placeholder="请输入值"></el-input>
</div>
</div>
</template>
<script>
export default {
data() {
return {
boxes: [] // 盒子数组
}
},
methods: {
addBox() {
this.boxes.push({
name: '',
value: ''
})
}
}
}
</script>
```
这个示例代码中,我们使用了 Element UI 的 `el-button` 和 `el-input` 组件,通过 `v-for` 指令来循环渲染盒子数组中的每个盒子。在点击新增盒子按钮时,会向盒子数组中添加一个新的盒子对象,它有两个属性:`name` 和 `value`,分别表示盒子中的两个输入框的值。
希望这个示例能对你有所帮助!