利用vue.js把静态json绑定bootstrap的table方法


Posted in Javascript onAugust 28, 2018

直接上代码

嘻嘻,发现bootstrap+vue.js拿来做原型效率挺高,以后就这样做原型

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="external nofollow" >
 <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
</head>
<body>
 <div class="container">

  <!-- start list -->
  <div class="col-md-6 col-md-offset-3">
   <h1>Vue demo</h1>
   <div id="app">
    <table class="table">
     <tr>
      <td><input type="checkbox"></td>
      <td>id</td>
      <td>书名</td>
      <td>作者</td>
      <td>价格</td>
     </tr>
     <tr v-for="book in books ">
      <td>
       <label>
        <input type="checkbox" v-bind:value="book.id" v-model="checkedNames">
       </label>
      </td>
      <td>{{book.id}}</td>
      <td>{{book.name}}</td>
      <td>{{book.author}}</td>
      <td>{{book.price}}</td>
     </tr>
     <tr>
      <td colspan="5">
       <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">add</button>
       <button type="button" class="btn btn-primary" v-on:click="delItems">delete</button>
      </td>
     </tr>
    </table>
    <p>Checked names: {{ checkedNames }}</p>


    <!-- start modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
       <div class="modal-body">
        <input class="form-control" placeholder="input id" v-model="book.id">
        <input class="form-control" placeholder="input author" v-model="book.author">
        <input class="form-control" placeholder="input name" v-model="book.name">
        <input class="form-control" placeholder="input price" v-model="book.price">
       </div>
       <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="addItem">Save changes</button>
       </div>
      </div>
     </div>
    </div>
    <!-- end modal -->

   </div>
  </div>
  <!-- end list -->

 </div>
</body>
<script>
 new Vue({
  el: '#app',
  data: {
   book: {
    id: '0',
    author: '',
    name: '',
    price: ''
   },
   checkedNames: [],
   books: [{
    id: '1',
    author: '曹雪芹',
    name: '红楼梦',
    price: 32.0
   }, {
    id: '2',
    author: '施耐庵',
    name: '水浒传',
    price: 30.0
   }, {
    id: '3',
    author: '罗贯中',
    name: '三国演义',
    price: 24.0
   }, {
    id: '4',
    author: '吴承恩',
    name: '西游记',
    price: 20.0
   }]
  },
  methods:{
   delItems : function() {
    for (var i = 0 ; i < this.checkedNames.length ; i++) {
     for(var j = 0 ; j < this.books.length ; j++){
      var cur_book = this.books[j];
      if(cur_book.id == this.checkedNames[i]){
       this.books.splice(j,1);
      }
     }
    }
    this.checkedNames = [];
   },
   addItem : function(){
    this.books.push(this.book);
   }
  }
 })
</script>
</html>

以上这篇利用vue.js把静态json绑定bootstrap的table方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现的折叠导航示例
Nov 29 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
js+css实现导航效果实例
Feb 10 Javascript
js显示文本框提示文字的方法
May 07 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
vue中的router-view组件的使用教程
Oct 23 Javascript
写一个Vue Popup组件
Feb 25 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
react native 获取地理位置的方法示例
Aug 28 #Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 #Javascript
JavaScript模拟实现自由落体效果
Aug 28 #Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 #Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 #Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 #Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 #Javascript
You might like
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
浅析PHP Socket技术
2013/08/02 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
解析Python中的二进制位运算符
2015/05/13 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python Web版语音合成实例详解
2019/07/16 Python
Python os模块常用方法和属性总结
2020/02/20 Python
环境工程大学生自荐信
2013/10/21 职场文书
项目经理岗位职责
2013/11/11 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
住房公积金接收函
2014/01/09 职场文书
会计岗位职责模板
2014/03/12 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server