时间:2021-05-25
直接上代码
嘻嘻,发现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方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue.js初级入门之最基础的双向绑定操作,具体内容如下首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jq
vue.js动态获取数据库数据(通过vue.cli和webpack搭建的环境)1.首先我先在创建一个静态的data.json文件,在static下创建json文
什么是Vue.js?Vue.js是用于构建交互式的Web界面的库。Vue.js提供了MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。Vue.js
什么是Vue.js?Vue.js是用于构建交互式的Web界面的库。Vue.js提供了MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。Vue.js
前言在Vue.js版本:1.0.27,使用Vue.js中V-bind指令来绑定class和style时,Vue.js对其进行了增强。表达式结果出了字符串之外,还