编程 Javascript

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

Posted in Javascript onSeptember 29, 2018

如下所示：

<!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动态删除从数据库倒入列表的某一条方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

俊人呀

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

爆炸式的JS圆形浮动菜单特效代码

Mar 03 Javascript

extjs实现选择多表自定义查询功能前台部分(ext源码)

Dec 20 Javascript

asp.net中System.Timers.Timer的使用方法

Mar 20 Javascript

向左滚动文字 js代码效果

Aug 17 Javascript

js实现select下拉框菜单

Dec 08 Javascript

JS实现淡入淡出图片效果的方法分析

Dec 20 Javascript

JS简单实现移动端日历功能示例

Dec 28 Javascript

jQuery实现左右滑动的toggle方法

Mar 03 jQuery

微信小程序如何修改radio和checkbox的默认样式和图标

Jul 24 Javascript

使用 js 简单的实现 bind、call 、aplly代码实例

Sep 07 Javascript

原生js实现点击轮播切换图片

Feb 11 Javascript

vue使用canvas实现移动端手写签名

Sep 22 Javascript

使用vue根据状态添加列表数据和删除列表数据的实例

Sep 29 #Javascript

vue-cli脚手架搭建的项目去除eslint验证的方法

Sep 29 #Javascript

原生JS实现旋转轮播图+文字内容切换效果【附源码】

Sep 29 #Javascript

使用 Node.js 实现图片的动态裁切及算法实例代码详解

Sep 29 #Javascript

使用electron将vue-cli项目打包成exe的方法

Sep 29 #Javascript

脚手架vue-cli工程webpack的作用和特点

Sep 29 #Javascript

基于vue和react的spa进行按需加载的实现方法

Sep 29 #Javascript