使用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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
Node.js 深度调试方法解析
Jul 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
document.forms[].submit()使用介绍
2014/02/19 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
webpack+vue2构建vue项目骨架的方法
2018/01/09 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Python turtle库的画笔控制说明
2020/06/28 Python
Android interview questions
2016/12/25 面试题
业务员岗位职责范本
2013/12/15 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
MySQL锁机制
2021/04/05 MySQL
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏