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


Posted in Javascript onMarch 17, 2018

视图:

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实现动态创建和删除数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
javascript操作css属性
Dec 30 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
js实现一个简易计算器
Mar 30 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 #Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 #Javascript
解决vue页面DOM操作不生效的问题
Mar 17 #Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 #Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 #Javascript
vue获取当前激活路由的方法
Mar 17 #Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 #Javascript
You might like
php+mysql实现用户注册登陆的方法
2015/01/03 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
php unlink()函数使用教程
2018/07/12 PHP
js页面跳转常用的几种方式
2010/11/25 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Python单链表原理与实现方法详解
2020/02/22 Python
python如何求100以内的素数
2020/05/27 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
大学校园毕业自我鉴定
2014/01/15 职场文书
医院工作检讨书范文
2014/02/10 职场文书
铁路安全事故反思
2014/04/26 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
个人务虚会发言材料
2014/10/20 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript