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 动态扩展对象之另类视角
May 25 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
js实现下拉菜单效果
Mar 01 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 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
神族 Protoss 历史背景
2020/03/14 星际争霸
浅谈PHP语法(1)
2006/10/09 PHP
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP中的替代语法介绍
2015/01/09 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
python做量化投资系列之比特币初始配置
2018/01/23 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
计算机科学与技术应届生求职信
2013/11/07 职场文书
创建青年文明号材料
2014/05/09 职场文书
公司年会策划方案
2014/05/17 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
2015年护士节慰问信
2015/03/23 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书