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 相关文章推荐
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 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
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
vuex存储token示例
2019/11/11 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python分析作业提交情况
2017/11/22 Python
python队列queue模块详解
2018/04/27 Python
python中的不可变数据类型与可变数据类型详解
2018/09/16 Python
python制作抖音代码舞
2019/04/07 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
keras中的History对象用法
2020/06/19 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
巴西男士个人护理产品商店:SHOP4MEN
2017/08/07 全球购物
大学生专科毕业生自我评价
2013/11/17 职场文书
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
2014年班组长工作总结
2014/11/20 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python