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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
javascript 按键事件(兼容各浏览器)
Dec 20 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 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
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
js获取Get值的方法
2016/09/29 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
服装设计专业毕业生求职信
2014/04/09 职场文书
指导教师评语
2014/04/26 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
2016年九九重阳节活动总结
2016/04/01 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
Python装饰器详细介绍
2022/03/25 Python