Vue是一个
前端框架，一般不会直接与后端交互，因此
增删改查
操作应该是指
前端页面对
前端数据的
增删改查。
在
Vue中，我们可以使用
Vue实例的data属性来存储
前端数据，然后使用
Vue提供的指令和方法来
操作这些
数据。
1
. 增加数据
我们可以使用
Vue提供的v-model指令来
实现数据双向绑定，从而
实现向
数据中添加新的内容。例如：
```html
<div id="app">
<input v-model="newItem">
<button @click="addItem">添加</button>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</div>
```
```
javascript
new
Vue({
el: "#app",
data: {
newItem: "",
items: ["item1", "item2", "item3"]
},
methods: {
addItem() {
this
.items
.push(this
.newItem);
this
.newItem = "";
}
}
});
```
2
. 删除数据
Vue提供的v-for指令可以用来循环渲染
数据列表，我们可以结合v-for和
Vue提供的
删除方法来
实现删除数据的
操作。例如：
```html
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
<button @click="removeItem(index)">
删除</button>
</li>
</ul>
</div>
```
```
javascript
new
Vue({
el: "#app",
data: {
items: ["item1", "item2", "item3"]
},
methods: {
removeItem(index) {
this
.items
.splice(index, 1);
}
}
});
```
3
. 修改
数据
如果我们要修改
数据，可以直接通过
Vue实例中的
数据来修改。例如：
```html
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index">
<span v-if="!item
.isEditing">{{ item
.content }}</span>
<input v-else v-model="item
.content">
<button @click="toggleEdit(index)">{{ item
.isEditing ? "保存" : "编辑" }}</button>
</li>
</ul>
</div>
```
```
javascript
new
Vue({
el: "#app",
data: {
items: [
{ content: "item1", isEditing: false },
{ content: "item2", isEditing: false },
{ content: "item3", isEditing: false }
]
},
methods: {
toggleEdit(index) {
this
.items[index]
.isEditing = !this
.items[index]
.isEditing;
}
}
});
```
4
. 查询
数据
查询
数据一般需要结合搜索框等组件来
实现，不同的搜索组件
实现方法也会有所不同。如果是简单的字符串匹配，我们可以通过
Vue提供的计算属性来
实现。例如：
```html
<div id="app">
<input v-model="searchText">
<ul>
<li v-for="(item, index) in filteredItems" :key="index">{{ item }}</li>
</ul>
</div>
```
```
javascript
new
Vue({
el: "#app",
data: {
searchText: "",
items: ["item1", "item2", "item3"]
},
computed: {
filteredItems() {
return this
.items
.filter(item => item
.includes(this
.searchText));
}
}
});
```
本文介绍如何在Vue.js中进行数据的增删操作。通过实例代码展示如何向数组添加新元素，以及如何利用Vue的方法删除数组元素，帮助开发者理解并实现在Vue应用中的数据管理功能。
订阅专栏 解锁全文
扫一扫
1371
到【灌水乐园】发言
