vue实现数据增加
数据绑定与响应式更新
在Vue中，通过v-model指令实现表单数据与组件数据的双向绑定。例如，输入框的值会实时同步到Vue实例的data属性中：
<template>
<input v-model="newItem" placeholder="输入新增内容">
<button @click="addItem">添加</button>
<ul>
<li v-for="(item, index) in itemList" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
newItem: '',
itemList: []
};
},
methods: {
addItem() {
if (this.newItem.trim()) {
this.itemList.push(this.newItem);
this.newItem = ''; // 清空输入框
}
}
}
};
</script>使用Vuex管理全局状态
当需要跨组件共享数据时，可通过Vuex的mutations修改状态：
// store.js
const store = new Vuex.Store({
state: {
items: []
},
mutations: {
ADD_ITEM(state, payload) {
state.items.push(payload);
}
}
});
// 组件中调用
this.$store.commit('ADD_ITEM', newItem);调用API异步新增数据
结合Axios发送POST请求，将数据提交到后端：
methods: {
async submitData() {
try {
const response = await axios.post('/api/items', { data: this.newItem });
this.itemList = response.data; // 更新本地数据
} catch (error) {
console.error('新增失败', error);
}
}
}表单验证与反馈
使用Vuelidate等库进行输入验证：
import { required, minLength } from 'vuelidate/lib/validators';
validations: {
newItem: { required, minLength: minLength(3) }
},
methods: {
addItem() {
if (!this.$v.$invalid) {
// 验证通过后执行新增
}
}
}列表渲染优化
为动态生成的列表项添加唯一key，避免渲染问题：
<li v-for="item in itemList" :key="item.id">{{ item.name }}</li>
