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

(编辑:jimmy 日期: 2024/11/17 浏览:2)

最近在用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数组并删除的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

一句话新闻
Windows上运行安卓你用过了吗
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。