How to dynamically create and delete data in Vue-JS Tutorial-php.cn

How to dynamically create and delete data in Vue

小云云

Release： 2018-05-15 13:57:37

Original

1687 people have browsed it

This article mainly shares with you a method of dynamically creating and deleting data in Vue. It has a good reference value and I hope it will be helpful to everyone. Let’s follow the editor to take a look, I hope it can help everyone.

View:

##The code is as follows:

<!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>
 <p id="app">
 <p 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>
 </p> 
 <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>
 </p>
</body>
</html>
<script type="text/javascript">
 new Vue({
  el:"#app",
  data:{
   msg:"hello",
   selected:&#39;女&#39;,
   userName:&#39;&#39;,
   userAge:&#39;&#39;,
   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>

Copy after login

Related recommendations:

JS adds events to dynamically created elements

JS methods to dynamically create tags and set attributes

Detailed explanation of the dynamic creation method of QR code based on node.js

The above is the detailed content of How to dynamically create and delete data in Vue. For more information, please follow other related articles on the PHP Chinese website!