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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
JavaScript ES6的函数拓展
Jan 18 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 删除cookie和浏览器重定向
2009/03/16 PHP
php上传文件的增强函数
2010/07/21 PHP
php中explode函数用法分析
2014/11/15 PHP
PHP中把对象数组转换成普通数组的方法
2015/07/10 PHP
CI框架常用方法小结
2016/05/17 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
Laravel5.1 框架路由基础详解
2020/01/04 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
javascript 正则表达式相关应介绍
2012/11/27 Javascript
JS模板实现方法
2013/04/03 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
2017/01/21 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
解决python3 json数据包含中文的读写问题
2018/05/10 Python
解决python报错MemoryError的问题
2018/06/26 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python字典底层实现原理详解
2019/12/18 Python
使用python求解二次规划的问题
2020/02/29 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
一个SQL面试题
2014/08/21 面试题
公司投资建议书
2014/05/16 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis