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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
vue组件横向树实现代码
Aug 02 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
js使用Promise实现简单的Ajax缓存
Nov 14 Javascript
详解es6新增数组方法简便了哪些操作
May 09 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中的正规表达式(二)
2006/10/09 PHP
php读取javascript设置的cookies的代码
2010/04/12 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
详解php反序列化
2020/06/10 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
Python使用filetype精确判断文件类型
2017/07/02 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python创建文本文件的简单方法
2020/08/30 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
医院后勤自我鉴定
2013/10/13 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
中学生清明节演讲稿
2015/03/18 职场文书