利用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 相关文章推荐
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
细说webpack6 Babel的使用详解
2019/09/26 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
js实现图片实时时钟
2020/01/15 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
深入理解Django-Signals信号量
2019/02/19 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
法国在线药房:DoctiPharma
2020/10/21 全球购物
中文教师求职信
2014/02/22 职场文书
房地产广告词大全
2014/03/19 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
妈妈别哭观后感
2015/06/08 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技