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 相关文章推荐
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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作的文本留言本的例子(六)
2006/10/09 PHP
php 购物车的例子
2009/05/04 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
JQuery validate插件验证用户注册信息
2016/05/11 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
python pdb调试方法分享
2014/01/21 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
详解Python之unittest单元测试代码
2018/01/24 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
python游戏开发的五个案例分享
2020/03/09 Python
python里反向传播算法详解
2020/11/22 Python
求职信内容考虑哪几点
2013/10/05 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
致青春观后感
2015/06/09 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
主婚人致辞精选
2015/07/28 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android