vue中push()方法+splice()的用途

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度

示例:
在这里插入图片描述

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
console.log(fruits); 
//["Banana", "Orange", "Apple", "Mango","Kiwi"]; 

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目

示例:

//删除起始下标为1,长度为1的一个值(len设置1,如果为0,则数组不变)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1);
console.log(fruits); 
//["Banana", "Apple", "Mango"]; 
//删除起始下标为1,长度为2的一个值(len设置2)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2);
console.log(fruits); 
//["Banana", "Mango"]; 
//替换起始下标为1,长度为1的一个值为‘ttt’,len设置的1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1,'ttt');
console.log(fruits); 
//["Banana", 'ttt',"Apple", "Mango"];
//替换起始下标为1,长度为2的两个值为‘ttt’,len设置的1

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2,'ttt');
console.log(fruits); 
//["Banana", 'ttt', "Mango"];
//在下标为1处添加一项’ttt’

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,0,'ttt');
console.log(fruits); 
//["Banana", 'ttt', "Orange", "Apple", "Mango"];
向数组中间添加元素

var items = ["1", "2", "3", "4"];
items.splice(items.length / 2, 0, "hello");
console.log(items);
// ["1", "2", "hello", "3", "4"]
好的,这是一个比较广泛的问题,我会尽可能详细地回答。 首先,我们需要创建一个基本的 Vue.js 应用程序,并安装所需的依赖项。我们可以使用 Vue CLI 来创建应用程序,它会自动配置我们需要的大部分内容,如路由和状态管理。 ``` vue create my-app ``` 接下来,我们需要安装 vue-router 和 vuex,这两个库分别用于路由和状态管理。 ``` npm install vue-router vuex ``` 接着,我们可以创建一个名为“contacts”的组件,用于显示我们的通讯录。这个组件将包含一个表格,用于显示我们的联系人列表。我们还需要一个名为“contact”的组件,用于编辑单个联系人的详细信息。 接下来,我们可以在我们的应用程序配置路由。我们需要定义两个路由,一个用于显示联系人列表,另一个用于编辑单个联系人的详细信息。 ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Contacts from './components/Contacts.vue' import Contact from './components/Contact.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Contacts }, { path: '/contact/:id', component: Contact } ] const router = new VueRouter({ routes }) export default router ``` 在这里,我们使用 VueRouter 创建了两个路由。一个路由用于显示联系人列表,另一个路由用于编辑单个联系人的详细信息。我们使用“:id”来指定要编辑的联系人的 ID。这个参数将在我们的组件使用。 接下来,我们可以创建一个名为“contacts”的 Vuex 模块,用于管理我们的通讯录。这个模块将包含我们的联系人列表,并提供用于添加、编辑和删除联系人的方法。 ```javascript const state = { contacts: [] } const mutations = { addContact (state, contact) { state.contacts.push(contact) }, updateContact (state, contact) { const index = state.contacts.findIndex(c => c.id === contact.id) state.contacts.splice(index, 1, contact) }, deleteContact (state, contact) { const index = state.contacts.findIndex(c => c.id === contact.id) state.contacts.splice(index, 1) } } const actions = { addContact ({ commit }, contact) { commit('addContact', contact) }, updateContact ({ commit }, contact) { commit('updateContact', contact) }, deleteContact ({ commit }, contact) { commit('deleteContact', contact) } } export default { state, mutations, actions } ``` 在这里,我们定义了三个 mutation,用于添加、更新和删除联系人。我们还定义了三个 action,用于触发这些 mutation。 最后,我们可以使用 Axios 库从后端 API 获取我们的联系人数据。我们可以在组件的 created 钩子发出 GET 请求,并将结果存储在我们的 Vuex store 。 ```javascript import axios from 'axios' export default { created () { axios.get('/api/contacts') .then(response => { this.$store.dispatch('addContact', response.data) }) .catch(error => { console.log(error) }) } } ``` 在这里,我们使用 Axios 发出 GET 请求,并在响应获取联系人数据。然后,我们调用我们的 Vuex action,将联系人添加到我们的 store 。 最终,我们将所有这些部分组合在一起,使用我们的通讯录应用程序。我们可以像这样在我们的 App.vue 文件导入我们的组件和路由: ```javascript <template> <div id="app"> <router-view></router-view> </div> </template> <script> import router from './router' export default { name: 'app', router } </script> ``` 在这里,我们将我们的路由器导入到我们的应用程序,并在模板使用<router-view>来显示当前路由。 这就是用 Vue 组件、Vue 路由、Vuex 和 Axios 实现通讯录的基本步骤。当然,这只是一个基本的示例,您可能需要根据您的具体需求进行更改和扩展。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bst@微胖子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值