如何在 Vue.js 中将项添加到数组中

关于如何在 Vue.js 中轻松地将项目添加到状态数组的快速指南。

使用 push() 方法将项目添加到数组

要在 Vue 中向数组中添加项目，请调用 推（） 以项目为参数的数组中的方法。这 推（） 方法会将项目添加到数组的末尾。

例如：

 <template>  
 <div id="app">  
 <button @click="addFruit">添加水果</button>  
 <ul>  
 <h2  
 v-for="(fruit, i) in fruits"  
 :key="我"  
 >  
 {{ 水果 }}  
 </h2>  
 </ul>  
 </div>  
 </template> <script>  
 导出默认{  
 数据（） {  
 返回 {  
 水果：['橙色'，'苹果']，  
 };  
 },  
 方法： {  
 添加水果（）{  
 this.fruits.push('香蕉');  
 },  
 },  
 };  
 </script>

这数组推送（）方法将一项或多项添加到数组的末尾并返回数组的长度。

我们使用 v-for Vue 指令显示数组中的项目。当数组被修改时，这些渲染的项目会在视图中自动更新 推（） .

在Vue中将对象项添加到数组

我们可以使用相同的方法将对象添加到数组中并显示更复杂的数据。我们只需要确保我们渲染数组中每个对象的属性，而不是对象本身。

 <template>  
 <div id="app">  
 <button @click="addFruit">添加水果</button>  
 <ul>  
 <h2  
 v-for="(fruit, i) in fruits"  
 :key="我"  
 >  
 <!-- Render "name" and "amount" properties -->  
 {{ 水果名称 }} ({{ 水果数量 }})  
 </h2>  
 </ul>  
 </div>  
 </template> <script>  
 导出默认{  
 数据（） {  
 返回 {  
 水果： [  
 {名称：'橙色'，数量：3}，  
 {名称：'Apple'，数量：5}，  
 ],  
 };  
 },  
 方法： {  
 添加水果（）{  
 // 将对象项添加到数组  
 this.fruits.push({ name: 'Banana', amount: 4 });  
 },  
 },  
 };  
 </script>