利用vue.js把靜態(tài)json綁定bootstrap的table方法
直接上代碼
嘻嘻,發(fā)現(xiàn)bootstrap+vue.js拿來做原型效率挺高,以后就這樣做原型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/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把靜態(tài)json綁定bootstrap的table方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)動態(tài)給id賦值,點擊事件獲取當(dāng)前點擊的元素的id操作
這篇文章主要介紹了vue實現(xiàn)動態(tài)給id賦值,點擊事件獲取當(dāng)前點擊的元素的id操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11前端vue中實現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實現(xiàn)文件下載的幾種方法總結(jié),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單
這篇文章主要介紹了Vue在頁面右上角實現(xiàn)可懸浮/隱藏的系統(tǒng)菜單,實現(xiàn)思路大概是通過props將showCancel這個Boolean值傳遞到子組件,對父子組件分別綁定事件,來控制這個系統(tǒng)菜單的顯示狀態(tài)。需要的朋友可以參考下2018-05-05vue-pdf實現(xiàn)pdf在線預(yù)覽并實現(xiàn)自定義預(yù)覽框高度
這篇文章主要介紹了vue-pdf實現(xiàn)pdf在線預(yù)覽并實現(xiàn)自定義預(yù)覽框高度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03intellij?idea+vue前端調(diào)試配置圖文教程
在Vue項目開發(fā)過程中,當(dāng)遇到應(yīng)用邏輯出現(xiàn)錯誤,但又無法準(zhǔn)確定位的時候,知曉Vue項目調(diào)試技巧至關(guān)重要,debug是必備技能,這篇文章主要給大家介紹了關(guān)于intellij?idea+vue前端調(diào)試配置的相關(guān)資料,需要的朋友可以參考下2024-09-09基于vue-seamless-scroll實現(xiàn)無縫滾動效果
這篇文章主要為大家詳細(xì)介紹了基于vue-seamless-scroll實現(xiàn)無縫滾動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04Vue?Router動態(tài)路由實現(xiàn)實現(xiàn)更靈活的頁面交互
Vue?Router是Vue.js官方的路由管理器,用于構(gòu)建SPA(單頁應(yīng)用程序),本文將深入探討Vue?Router的動態(tài)路由功能,希望可以幫助大家更好地理解和應(yīng)用Vue.js框架2024-02-02