vue动态删除从数据库倒入列表的某一条方法

人气：577 时间：2019-04-12

这篇文章主要为大家详细介绍了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动态删除从数据库倒入列表的某一条方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/6022-0.html

注：关于vue动态删除从数据库倒入列表的某一条方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：脚手架vue-cli工程webpack的基本用法分析

下一篇：在vue中更换字体,本地存储字体非引用在线字体库的方法