vue2.0实现列表数据增加和删除


Posted in Javascript onJune 17, 2020

本文实例为大家分享了vue2.0实现列表数据增加和删除的具体代码,供大家参考,具体内容如下

css

<style>
 [v-cloak]{
  display: none;
 }
 table{
  width: 800px;
  border-collapse: collapse;
  margin: 20px auto;
 }
 table th,table td{
  background: #0094ff;
  color: white;
  font-size: 16px;
  padding: 5px;
  text-align: center;
  border: 1px solid black;
 }
 table td{
  background: #fff;
  color: red;
 }
</style>

html

<div id="app">
 <input type="text" v-model="id">
 <input type="text" v-model="pname">
 <button @click="addData">添加</button>
 <table>
  <tr>
   <th>编号</th>
   <th>名称</th>
   <th>创建时间</th>
   <th>操作</th>
  </tr>
  <tr v-if="list.length == 0">
   <td colspan="4">当前列表无数据</td>
  </tr>
  <tr v-for="(item,index) in list">
   <td>{{item.id}}</td>
   <td>{{item.pname}}</td>
   <td>{{item.ctime}}</td>
   <td>
    <!-- 方法一 -->
    <!-- <a href="#" @click="delData(index)">删除</a> -->
    <!-- 方法二 -->
    <a href="#" @click="delData(item.id)">删除</a>
   </td>
  </tr>
 </table>
</div>

js

<script src="../dist/vue.js"></script>
<script>
 var vm = new Vue({
  el: '#app',
  data: {
   id: 0,
   pname: '',
   list: [
    {id: 1, pname: '奔驰1', ctime: new Date}
   ]
  },
  methods: {
   addData(){
    // 包装成list要求的对象
    var p = {id: this.id, pname: this.pname, ctime: new Date()}
    this.list.push(p);
    // 清空文本框中的数据
    this.id = 0;
    this.pname = '';
   },
   delData: function(index){
    if(!confirm('是否要删除当前数据')){
     //当用户点击的取消按钮的时候,应该阻断这个方法中的后面代码的继续执行
     return;
    }

    // 方法一
    // this.list.splice(index,1);
    // 方法二:
    // 根据 id 获取要删除的索引,方法一是直接传入删除数组的索引
    var index = this.list.findIndex(function(item){
     return item.id == index;
    });
    this.list.splice(index,1);
   }
  }
 });
</script>

效果图

vue2.0实现列表数据增加和删除

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
javascript 学习之旅 (1)
Feb 05 Javascript
Javascript在IE和FireFox中的不同表现简析
Dec 03 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
element ui table 增加筛选的方法示例
Nov 02 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 #Javascript
vue实现前端分页完整代码
Jun 17 #Javascript
JS实现网站楼层导航效果代码实例
Jun 16 #Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 #Javascript
JS 5种遍历对象的方式
Jun 16 #Javascript
js实现小球在页面规定的区域运动
Jun 16 #Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
PHP中的类型约束介绍
2015/05/11 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
Python3解释器知识点总结
2019/02/19 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
python openCV自制绘画板
2020/10/27 Python
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
一组SQL面试题
2016/02/15 面试题
大学四年规划书范文
2013/12/27 职场文书
采购部长岗位职责
2014/06/13 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
药房管理制度范本
2015/08/06 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android