vue3按钮点击新增一行div,并且可以删除一行,并且第一行不可以删除
时间: 2023-05-17 11:05:22 浏览: 172
可以使用Vue3的v-for指令和数组来实现这个功能。首先,定义一个数组来存储每一行的数据,然后使用v-for指令来循环渲染每一行的div。当点击新增按钮时,向数组中添加一个新的数据对象,然后重新渲染页面即可。当点击删除按钮时,从数组中移除对应的数据对象,然后重新渲染页面即可。为了保证第一行不被删除,可以在模板中判断当前行是否是第一行,如果是则禁用删除按钮。
以下是示例代码:
HTML模板:
```
<div id="app">
<div v-for="(item, index) in items" :key="index">
<button @click="removeItem(index)" :disabled="index === 0">删除</button>
<span>{{ item }}</span>
</div>
<button @click="addItem">新增</button>
</div>
```
JavaScript代码:
```
const app = Vue.createApp({
data() {
return {
items: ['第一行']
}
},
methods: {
addItem() {
this.items.push('新行')
},
removeItem(index) {
this.items.splice(index, 1)
}
}
})
app.mount('#app')
```
当点击新增按钮时,会向数组中添加一个新的数据对象,然后重新渲染页面。当点击删除按钮时,会从数组中移除对应的数据对象,然后重新渲染页面。第一行的删除按钮会被禁用,保证第一行不会被删除。