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 相关文章推荐
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
node.js操作mysql简单实例
May 25 Javascript
Node.js简单入门前传
Aug 21 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
js实现飞机大战小游戏
Aug 26 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
jquery ajax post提交数据乱码
2013/11/05 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
vue2配置scss的方法步骤
2019/06/06 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
小小聊天室Python代码实现
2016/08/17 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python按钮的响应事件详解
2019/03/04 Python
深入了解Django中间件及其方法
2019/07/26 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
资料员的岗位职责
2013/11/20 职场文书
毕业论文评语大全
2014/04/29 职场文书
简易版租房协议书范本
2014/10/13 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
python接口测试返回数据为字典取值方式
2022/02/12 Python