vue增删改查函数调用
时间: 2023-08-30 18:10:58 浏览: 42
下面是一个简单的 Vue 组件,展示了如何实现增删改查功能,并调用相应的函数:
```
<template>
<div>
<form @submit.prevent="add">
<input v-model="newItem" type="text" placeholder="Add new item">
<button type="submit">Add</button>
</form>
<ul>
<li v-for="(item, index) in items" :key="index">
<span>{{ item }}</span>
<button @click="edit(index)">Edit</button>
<button @click="remove(index)">Remove</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['item 1', 'item 2', 'item 3'],
newItem: '',
editIndex: null,
};
},
methods: {
add() {
this.items.push(this.newItem);
this.newItem = '';
},
edit(index) {
this.newItem = this.items[index];
this.editIndex = index;
},
update() {
this.items.splice(this.editIndex, 1, this.newItem);
this.newItem = '';
this.editIndex = null;
},
remove(index) {
this.items.splice(index, 1);
},
},
};
</script>
```
在上述代码中,`add()` 函数向 `items` 数组中添加一个新项,`edit()` 函数将编辑索引设置为当前项的索引,同时将当前项的值赋给 `newItem` 变量,`update()` 函数将使用 `splice()` 方法更新当前项的值,`remove()` 函数将从 `items` 数组中删除当前项。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)