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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
JS启动应用程序的一个简单例子
May 11 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
JavaScript的一些小技巧分享
Jan 06 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
Python中下划线的使用方法
2015/03/27 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python 默认参数问题的陷阱
2016/02/29 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python常用知识梳理(必看篇)
2017/03/23 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
python db类用法说明
2020/07/07 Python
优秀班集体获奖感言
2014/02/03 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
信用卡工资证明范本
2014/10/17 职场文书
校本课程教学计划
2015/01/19 职场文书
护士旷工检讨书
2015/08/15 职场文书
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js