利用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 相关文章推荐
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
150行Node.js实现的dns代理工具
Aug 02 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
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
php实现paypal 授权登录
2015/05/28 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
详解Python中heapq模块的用法
2016/06/28 Python
python字符串中的单双引
2017/02/16 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
django 模版关闭转义方式
2020/05/14 Python
Python 爬虫的原理
2020/07/30 Python
简单介绍Object类的功能、常用方法
2013/10/02 面试题
销售总监工作职责
2013/11/21 职场文书
给民警的表扬信
2014/01/08 职场文书
简历中的自我评价范文
2014/02/05 职场文书
卖房协议书
2014/04/11 职场文书
卖车协议书范例
2014/09/16 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
写给老婆的保证书
2015/02/27 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
追悼会答谢词范文
2015/09/29 职场文书
小学班级标语口号大全
2015/12/26 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技