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 相关文章推荐
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
Apr 01 Javascript
将查询条件的input、select清空
Jan 14 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
vue实现动态数据绑定
Apr 28 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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添加Xdebug扩展的方法
2014/02/12 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
js获取html文件的思路及示例
2013/09/17 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
express的中间件cookieParser详解
2014/12/04 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
[50:20]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第四局
2016/03/06 DOTA
python 简易计算器程序,代码就几行
2009/08/29 Python
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
简单介绍Python中的floor()方法
2015/05/15 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
MySQL8.0的WITH查询详情
2021/08/30 MySQL
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python