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


Posted in Javascript onNovember 01, 2019

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

Javascript 相关文章推荐
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
jQuery内容筛选选择器实例代码
Feb 06 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 #Javascript
JS实现动态星空背景效果
Nov 01 #Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
vue 中固定导航栏的实例代码
Nov 01 #Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 #Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 #Javascript
Vue实现导航栏的显示开关控制
Nov 01 #Javascript
You might like
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
原生js封装运动框架的示例讲解
2017/10/01 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
Python开发常用的一些开源Package分享
2015/02/14 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
学生会离职感言
2014/02/11 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
使用CSS连接数据库的方式
2022/02/28 HTML / CSS