使用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 相关文章推荐
javascript第一课
Feb 27 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
jquery实现弹出窗口效果的实例代码
Nov 28 Javascript
js中split和replace的用法实例
Feb 28 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 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带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
9个比较实用的php代码片段
2016/03/15 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
微信小程序组件传值图示过程详解
2019/07/31 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
python实现问号表达式(?)的方法
2013/11/27 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
《雨霖铃》听课反思
2014/02/13 职场文书
文明村创建实施方案
2014/03/27 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
公民代理授权委托书
2014/09/24 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript