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

Javascript 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
JavaScript 模拟用户单击事件
Dec 31 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
JavaScript模块详解
Dec 18 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 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
You might like
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
vue实现购物车列表
2020/06/30 Javascript
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python创建xml文件示例
2017/03/22 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
佳能法国商店:Canon法国
2019/02/14 全球购物
JPA的特点
2014/10/25 面试题
采购部主管岗位职责
2014/01/01 职场文书
双语教学实施方案
2014/03/23 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
暑期学习心得体会
2014/09/02 职场文书
民事代理词范文
2015/05/25 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书