Vue实现动态创建和删除数据的方法

视图：

代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 //导入vue.js
 <script type="text/javascript" src="./vue.js"></script>
 //非常简单了设置了一下css样式
 <style type="text/css">
 #app{
  height: 100%;
  margin-left: 200px;
  width:50%;
  text-align: center;
  background-color: lightpink
  }
  .tab{
   width: 600px;
   margin-top: 30px;
   background-color: lightpink;
  }
  input{
   height: 25px;
   margin-top: 10px;
   border-radius:5px;
  }
 </style>
</head>
<body>
 <div id="app">
 <div class="createForm">
  姓名:<input type="text" name="uname" v-model="userName"><br>
  年龄:<input type="text" name="uage" id="uage" v-model="userAge"><br>
  性别:<select name="gender" v-model="selected">
   <option v-for="option in options" v-bind:value="option.gender">
    {{option.gender}}
   </option>
  </select>
  {{selected}}
  <br>
  <button type="button" v-on:click="insertInfo">创建</button>
 </div>
 <table class="tab">
  <tr style="background-color: pink">
   <th>姓名</th>
   <th>年龄</th>
   <th>性别</th>
   <th>删除</th>
  </tr>
  <tr v-for="(person,index) in infoArr">
   <td>{{person.uname}}</td>
   <td>{{person.uage}}</td>
   <td>{{person.gender}}</td>
   <td><button v-on:click="deleteInfo(index)">删除</button></td>
  </tr>
 </table>
 </div>
</body>
</html>
<script type="text/javascript">
 new Vue({
  el:"#app",
  data:{
   msg:"hello",
   selected:'女',
   userName:'',
   userAge:'',
   options:[
   {gender:"男"},
   {gender:"女"}
   ],
   infoArr:[]
  },
  methods:{
  //添加数据的方法
   insertInfo(){
    var obj={};
    obj.uname=this.userName;
    obj.uage=this.userAge;
    obj.gender=this.selected;
    this.infoArr.push(obj);
    console.log(obj);
   },
   //删除的方法
   deleteInfo(index){
    this.infoArr.splice(index,1);
   }
  }
 })

</script>

以上这篇Vue实现动态创建和删除数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • Vue.js实现表格动态增加删除的方法（附源码下载）
  • vue2 中如何实现动态表单增删改查实例
  • 在Vue组件上动态添加和删除属性方法
  • Vue.js实现简单动态数据处理
赞 (0)

相关推荐

  • Vue.js实现简单动态数据处理

    直接上代码吧 <%@ page contentType="text/html;charset=UTF-8" %> <html> <head> <title>LibGoodsController测试页面</title> <meta name="layout" content="main"/> <script type="text/javascript"

  • vue2 中如何实现动态表单增删改查实例

    最近项目中遇到的需求是要操作大量的表单,之前的项目中有做过这方的研究,只不过是用jquery来操作. 项目A 先简单说说以前项目A中的应用场景,可能有小伙伴儿也遇到相同的需求.A项目是公司的OA系统中有的项目,是用java的jsp渲染的页面,需求是要改成:嵌入APP中显示,前后端分离, 后端返回的内容,还不能修改, 只是后端同事做了下接口处理,返回给前端的是一大堆的表单数据. 每个表单都有多个字段表示它的属性: 是否可编辑 表单类型 (text, textarea, select, radio,

  • Vue.js实现表格动态增加删除的方法（附源码下载）

    Vue.js实现表格动态增加删除的方法（附源码下载）

    Vue.js Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 先来看看实现的效果: 下面的例子会用到bootstrap.min.css以及vue.js,都可以从网上下载(文末有完整源码下载提供). 实例 源码 <!DOCTYPE html> <html lang="en"> <head&g

  • 在Vue组件上动态添加和删除属性方法

    如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码 详解Vue 动态添加模板的几种方法

  • Vue实现动态创建和删除数据的方法

    视图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单了设置了一下css样式 <style typ

  • javascript动态创建及删除元素的方法

    本文实例讲述了javascript动态创建及删除元素的方法.分享给大家供大家参考.具体分析如下: 在DOM中我们可以方便快速的动态删除与删除dom元素,这里我们就来给各位朋友简单的介绍一下. 例1: 动态创建一个按钮 复制代码 代码如下: <html> <head> <title>动态创建按钮</title> <script language="javascript"> var a,b,ab,ba,c; function cr

  • vue点击按钮动态创建与删除组件功能

    vue点击按钮动态创建与删除组件功能

    主要功能需求点: 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示 点击右侧创建的组件中的删除按钮,删除对应的组件 删除对应的组件之后,下方的组件位置自动上移 效果图: 代码: 父组件代码(去除了css样式代码): <template> <div class="home"> <div class="container"> <div class="addZujian"> <div>

  • Vue中通过Vue.extend动态创建实例的方法

    在Vue中,如果我们想要动态地来控制一个组件的显示和隐藏,比如通过点击按钮显示一个对话框或者弹出一条信息.我们通常会提前写好这个组件,然后通过v-if = "show"来控制它的显示隐藏.如下所示: <div> <button @click = "show = !show">弹出</button> <span v-if = "show">这是一条通过按钮控制显示隐藏的信息</span>

  • vue 动态创建组件的两种方法

    vue 动态创建组件的两种方法

    Vue动态创建组件实例并挂载到body 方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(c

  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • Vue实现动态添加或者删除对象和对象数组的操作方法

    添加核心代码如下: this.data.push({ type: [{ value: '选项1', label: 'in' }, { value: '选项3', label: 'out' }], value:[{ value: '选项1', label: 'CSV' }, { value: '选项3', label: 'TSV' }], parameter:'', default:'', description:'', isDelete:false, }); 删除核心代码如下: /*遍历数组,然

  • jQuery实现表单动态添加与删除数据操作示例

    jQuery实现表单动态添加与删除数据操作示例

    本文实例讲述了jQuery实现表单动态添加与删除数据操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户名注册</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js

  • php+mysqli实现批量执行插入、更新及删除数据的方法

    本文实例讲述了php+mysqli实现批量执行插入.更新及删除数据的方法.分享给大家供大家参考.具体如下: mysqli批量执行插入/更新/删除数据,函数为 multi_query(). 下面的代码只是批量插入数据,事实上,插入数据.更新数据.删除数据等可以混合一起执行.查询时使用该函数,读取数据有点不太一样,具体参考如下代码: <?php //1.创建数据库连接对象 $mysqli = new MySQLi("localhost","root","

  • MySQL查看、创建和删除索引的方法

    本文实例讲述了MySQL查看.创建和删除索引的方法.分享给大家供大家参考.具体如下: 1．索引作用 在索引列上,除了上面提到的有序查找之外,数据库利用各种各样的快速定位技术,能够大大提高查询效率.特别是当数据量非常大,查询涉及多个表时,使用索引往往能使查询速度加快成千上万倍. 例如,有3个未索引的表t1.t2.t3,分别只包含列c1.c2.c3,每个表分别含有1000行数据组成,指为1-1000的数值,查找对应值相等行的查询如下所示. SELECT c1,c2,c3 FROM t1,t2,t3

随机推荐