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

2019-11-19 13:07:28

字体：大中小

来源：转载

供稿：网友

直接上代码

嘻嘻，发现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方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：layui实现文件或图片上传记录

下一篇：react native 获取地理位置的方法示例