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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
JS判断对象是否存在的10种方法总结
Dec 23 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
全系IE支持Bootstrap的解决方法
Oct 19 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
Python实现12306火车票抢票系统
2019/07/04 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python实现查找所有程序的安装信息
2020/02/18 Python
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
初中生学习生活的自我评价
2013/11/20 职场文书
自强之星事迹材料
2014/05/12 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
签订劳动合同通知书
2015/04/16 职场文书
法律意见书范文
2015/05/20 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
python3 字符串str和bytes相互转换
2022/03/23 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技