Vue实现push数组并删除的例子
更新时间：2019年11月01日 11:02:49 作者：任我行R
今天小编就为大家分享一篇Vue实现push数组并删除的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
最近在用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数组并删除的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了通过Element ui往页面上加一个分页导航条的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
vite+vue3不清除浏览器缓存直接下载最新代码的解决方案
vite+vue3项目发布后,浏览器上还是旧代码,没有及时更新到最新代码,下面通过本文给大家分享vite+vue3不清除浏览器缓存直接下载最新代码的解决方案,感兴趣的朋友一起看看吧2024-06-06
本篇文章主要介绍了vue-router 组件复用问题详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最近上线一个项目,手机网站进行调起支付宝App支付,做起来还是满顺手的,在此做个记录,这篇文章主要给大家介绍了关于前端H5微信支付宝支付实现方法的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了VsCode里的Vue模板的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用，这篇文章主要介绍了Vue组件间传值的实现2022-09-09
vue在index.html中引入静态文件不生效问题及解决方法
这篇文章主要介绍了vue在index.html中引入静态文件不生效问题及解决方法，本文给大家分享两种原因分析，通过实例代码讲解的非常详细 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue基于element的区间选择组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue使用keep-alive实现数据缓存不刷新，这里整理了详细的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了Vue中数组和对象更改后视图不刷新的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论