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

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

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

Vue push数组 删除