Vue实现push数组并删除的例子

(编辑：jimmy 日期: 2024/5/16 浏览：3 次 )

最近在用Vue做评论互动的时候用到了push，因为项目是迭代开发，所以现在做一个简易的demo回顾下

<template>
 <div>
  <ul v-for="(item , index) in list" :key="index">
   <li>
    {{item.serial}}---
    <button @click="remove(index)">删除</button>
   </li>
  </ul>
  <input type="text" v-model="serial" />
  <input type="button" value="点击添加" @click="getserial" />
 </div>
</template>

<script>
export default {
 data() {
  return {
   list: [
    { serial: 1 },
    { serial: 2 },
    { serial: 3 },
    { serial: 4 },
    { serial: 5 }
   ],
   serial: ""
  };
 },
 methods: {
  getserial() {
   this.list.push({
    serial: this.serial
   });
   this.serial = "";
  },
  //通过索引删除数组
  remove(index) {
   //splice 操作数组的方法
   this.list.splice(index, 1);
  }
 }
};
</script>

<style>
</style>

以上这篇Vue实现push数组并删除的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇：js实现漂亮的星空背景
下一篇：vue实现跳转接口push 转场动画示例