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 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
javascript实现数独解法
Mar 14 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
Vue实现简单的拖拽效果
Aug 25 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 $_SERVER当前完整url的写法
2009/11/12 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
基于js实现抽红包并分配代码实例
2019/09/19 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python中的字典遍历备忘
2015/01/17 Python
python实现键盘控制鼠标移动
2020/11/27 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
物流仓管员工作职责
2014/01/06 职场文书
初中化学教学反思
2014/01/23 职场文书
鉴定评语大全
2014/05/05 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
为Centos安装指定版本的Docker
2022/04/01 Servers