使用Bootstrap + Vue.js实现添加删除数据示例


Posted in Javascript onFebruary 27, 2017

界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果。

这里提供bootstrap的在线文件给大家引用:

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

效果如下图所示,输入用户名和年龄,点击添加,数据会自动添加到下面的用户信息表内。当没有数据时,用户信息表显示:暂无数据……,当有数据时,显示 删除全部 按钮,这里为了方便快捷,我没有做删除按钮的弹出框,所以 点击删除按钮 会直接删除掉当前这条数据。

使用Bootstrap + Vue.js实现添加删除数据示例

使用Bootstrap + Vue.js实现添加删除数据示例

<div class="container" id="box">
    <form role="form">
      <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" class="form-control" placeholder="请输入用户名" v-model="username" />
      </div>
      <div class="form-group">
        <label for="age">年龄:</label>
        <input type="text" id="age" class="form-control" placeholder="请输入年龄" v-model="age" />
      </div>
      <div class="form-group">
        <input type="button" value="添加" class="btn btn-primary" v-on:click="add()" />
        <input type="reset" value="重置" class="btn btn-danger" />
      </div>
    </form>
    <hr>
    <table class="table table-bordered table-hover">
      <caption class="text-center">用户信息表</caption>
      <tr class="text-danger">
        <th class="text-center">序号</th>
        <th class="text-center">名字</th>
        <th class="text-center">年龄</th>
        <th class="text-center">操作</th>
      </tr>
      <tr class="text-center" v-for="(item, index) in myData">
        <td>{{index+1}}</td> 
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>
          <button class="btn btn-primary btn-sm" v-on:click="deleteMsg()">删除</button>
        </td>
      </tr>
      <tr v-show="myData.length!==0">
        <td colspan="4" class="text-right">
          <button class="btn btn-danger" v-on:click="all()">删除全部</button>
        </td>
      </tr>
      <tr v-show="myData.length==0">
        <td colspan="4" class="text-center text-muted">
          <p>暂无数据……</p>
        </td>
      </tr>
    </table>
  </div>
window.onload = function(){
    new Vue({
      el:"#box",
      data:{
        myData:[],
        username:'',
        age:'',
        nowIndex:-100
      },
      methods:{
        add:function(){
          this.myData.push({
            name:this.username,
            age:this.age
          });
          this.username='';
          this.age='';
        },
        deleteMsg:function(){
          this.myData.splice(0,1)
        },
        all:function(){
          this.myData = [];
        }
      }
    })
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的一个图片hover的插件
Apr 24 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
jQuery插件开发全解析
Oct 10 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 #Javascript
详解Javascript几种跨域方式总结
Feb 27 #Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 #Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 #Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 #Javascript
JavaScript中Promise的使用详解
Feb 26 #Javascript
setTimeout函数的神奇使用
Feb 26 #Javascript
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
Node使用Selenium进行前端自动化操作的代码实现
2019/10/10 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
django中静态文件配置static的方法
2018/05/20 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
基层工作经历证明
2015/06/19 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书