el-input动态添加
时间: 2023-11-22 08:06:07 浏览: 68
根据提供的引用内容,el-input是一个Vue.js框架中的组件,用于创建输入框。动态添加el-input可以通过Vue.js的数据绑定实现。具体步骤如下:
1. 在Vue.js的data中定义一个数组,用于存储动态添加的el-input的数据。
2. 在模板中使用v-for指令遍历数组,动态生成el-input组件。
3. 通过v-model指令将el-input的值与数组中的数据进行双向绑定,实现数据的同步更新。
4. 通过Vue.js的方法向数组中添加或删除数据,实现动态添加或删除el-input组件。
示例代码如下:
```
<template>
<div>
<div v-for="(input, index) in inputs" :key="index">
<el-input v-model="input.value"></el-input>
<el-button @click="removeInput(index)">删除</el-button>
</div>
<el-button @click="addInput">添加</el-button>
</div>
</template>
<script>
export default {
data() {
return {
inputs: [{ value: '' }]
}
},
methods: {
addInput() {
this.inputs.push({ value: '' })
},
removeInput(index) {
this.inputs.splice(index, 1)
}
}
}
</script>
```
阅读全文