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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
alert和confirm功能介绍
May 21 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 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实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
ThinkPHP安装和设置
2015/07/27 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
JS实现放烟花效果
2020/03/10 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
在windows系统中实现python3安装lxml
2016/03/23 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
python中嵌套函数的实操步骤
2019/02/27 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
python opencv调用笔记本摄像头
2019/08/28 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
活动志愿者自荐信
2014/01/27 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
银行竞聘报告范文
2014/11/06 职场文书
讲座通知范文
2015/04/23 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书