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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
同步文本框内容JS代码实现
Aug 04 Javascript
js中less常用的方法小结
Aug 09 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 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获取今日开始时间和结束时间的方法
2017/02/27 PHP
详解PHP使用Redis存储session时的一个Warning定位
2017/07/05 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
jquery得到font-size属性值实现代码
2013/09/30 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
Python写的Socks5协议代理服务器
2014/08/06 Python
python网络编程之读取网站根目录实例
2014/09/30 Python
Python批量转换文件编码格式
2015/05/17 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
python 性能优化方法小结
2017/03/31 Python
python爬取微信公众号文章的方法
2019/02/26 Python
解决yum对python依赖版本问题
2019/07/05 Python
python的re模块使用方法详解
2019/07/26 Python
Python @property使用方法解析
2019/09/17 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
python中pickle模块浅析
2020/12/29 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
党员入党表决心的话
2014/03/11 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
2014年体育部工作总结
2014/11/13 职场文书
仙境之桥观后感
2015/06/16 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python