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

2019-11-19 14:08:47

字体：大中小

来源：转载

供稿：网友

视图：

代码如下：

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

上一篇：基于vue2.0动态组件及render详解

下一篇：JS实现将链接生成二维码并转为图片的方法