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

2024-12-17 21:17:04

本文实例为大家分享了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>

<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实现列表数据增加和删除

本文实例为大家分享了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-alig
python列表数据增加和删除的具体实例

1.使用 append 函数来为列表 list 添加数据,默认将数据追加在末尾. # !usr/bin/env python # -*- coding:utf-8 _*- """ @Author:猿说编程 @Blog(个人博客地址): www.codersrc.com @File:python列表list.py @Time:2021/3/22 00:37 @Motto:不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累! ""&quo
jQuery列表动态增加和删除的实现方法

通过jQuery实现列表的数据动态添加与删除代码演示演示地址背景隔行换色 CSS代码 /* 设置奇数行颜色 */ .even { background-color: dodgerblue; } /* 设置偶数行背景颜色 */ .odd { background-color: pink; } JavaScript代码 // 设置奇数偶数行的背景颜色 $("tr:even").addClass("even"); $("tr:odd").addC
ionic中列表项增加和删除的实现方法

在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,例如: 要实现可以选中商品,以及对商品的信息列表进行显示与否的操作 html代码如下: <div class="chanpinxiangqing"> <div class="item item-divider">产品明细</div> <div class="chanpinxiangqing" ng-repeat="master in m
JavaScript实现下拉列表框数据增加、删除、上下排序的方法

本文实例讲述了JavaScript实现下拉列表框数据增加.删除.上下排序的方法.分享给大家供大家参考.具体如下: 这里实现在一个支持多选的下拉列表框内进行数据项的添加.删除.向上.向下移动操作,我们在一些人才网站或是编程技术站经常会看到这种功能,比较实用. 运行效果截图如下: 具体代码如下: <title>下拉列表数据上下排序</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function
jQuery实现列表的增加和删除功能

具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <style> </style> </head> <body> <div> <table style="margin: 10px a
Vuex实现数据增加和删除功能

首先,我们要安装vuex,执行命令yarn add vuex 1.编写state数据 //vuex/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state = { bookList: [ {id: 1, name: '西游记'},{id: 2, name: '水浒传'}, {id: 3, name: '红楼梦'},{id: 4, name: '三国演义'} ] } export def
Vue2.0组件间数据传递示例

Vue1.0组件间传递使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换 1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件
Vue2.0实现组件数据的双向绑定问题

通过上一节的学习,我们了解到了在Vue的组件中数据传递: prop 向下传递,事件向上传递 .意思是父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息.但Vue中, props 是单向数据绑定,虽然在Vue 1.0版本中,通过 .sync 能实现双向数据绑定.但 .sync 在几个版本中被移除,尽管在2.3版本重新引入 .sync 修饰符,可这次引入只是作为一个编译时的语法糖存在.如果直接使用 .sync 修饰符来做双向数据绑定,会报警告信息.那么我们如何在组件中实现双向数据
vue2.0 可折叠列表 v-for循环展示的实例

先上一张效果图: 以前用angularjs操作基本上都是要取到每个列表的id再循环判断是不是当前点击的列表来显示折叠. 今天在这个项目 https://github.com/IFmiss/vue-music上看到操作很简单,并没有如此复杂.赶紧记录一下: 折叠列表单独做一个组件,图标是用的iconfont中生成的css链接:myMusicSheetList.vue <template> <div class="sheet-list"> <div class

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

相关推荐

随机推荐