使用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验证表单中的单选与多选实例
Aug 18 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
基于vue--key值的特殊用处详解
Jul 31 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+javascript的日历控件
2009/11/19 PHP
php标签云的实现代码
2012/10/10 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Python端口扫描简单程序
2016/11/10 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
python 列表推导式使用详解
2019/08/29 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Python基于template实现字符串替换
2020/11/27 Python
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
安全生产先进个人材料
2014/02/06 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
2015政治思想表现评语
2015/03/25 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
2016年敬老月活动总结
2016/04/05 职场文书