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

最新推荐文章于 2024-05-16 10:45:51 发布
最新推荐文章于 2024-05-16 10:45:51 发布
阅读量8.4k 收藏
点赞数 1
分类专栏： vue

直接上代码

嘻嘻，发现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">
    <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">&times;</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>
html表格接收json数据,Bootstrap-table如何显示后台传过来的JSON数据？
weixin_32121331的博客
06-08 1362
大致懂了……可能是对JS不太了解吧，没有返回object，下面是成功代码：$(function () {//初始化Tablevar teacherTable = new TableInit();teacherTable.Init();});var TableInit = function () {var oTableInit = new Object();//初始化TableoTableInit....
Ajax请求的使用 后台servlet中获取Ajax的内容 Vue双重循环输出绑定动态model 前台获取多对多对象
qq_40656628的博客
06-26 610
    在做一个问卷调查的Demo中，遇到需要从后台获取多个问题，并且每个问题，每个问题有多个选项的情况。在这里总结一下，在前台使用Vue，后台使用servlet的情况下，如何获取到整个问卷的问题以及选项并展示在页面中, 以及填报完成后将问卷填写结果存入数据库。前台在Vue中使用Ajax请求根据所选择的问卷的id获取问卷的所有问题以及选项              //获取所有问题的方法     ...
bootstrap-table动态加载json数据并且支持分页
03-16
bootstrap-table动态加载json数据并且支持分页。摘要必须大于50个字节！
设定servlet返回ajax值为json类型
平兄的笔记
10-11 1231
java项目中经常需要和前端页面交互,在微信公众号二次开发中更是经常用到json数据,这里总结一下java中各种数据和json数据的转换: 测试demo: 需要一下五个jar包支持
Vue 读取本地静态文件 json【2种方法及优缺点】_vue 从assets中读取json
2301_82243710的博客
05-16 956
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
在vue项目中如何使用静态json文件
m0_52872381的博客
03-11 1342
2.然后在组件的mounted钩子函数下进行获取。1.首先将jso文件引入到public文件夹下。
利用vue.js把静态json绑定bootstrap的table方法
12-12
嘻嘻，发现bootstrap+vue.js拿来做原型效率挺高，以后就这样做原型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel=...
Bootstrap Table与前端框架性能对决：Angular、Vue.js与React.js比较
![Bootstrap Table与前端框架性能对决：Angular、Vue.js与React.js比较]... # 摘要 随着Web应用的快速发展，前端框架性能分析和优化变得至关重要，尤其是对于集成Bootstrap Table这样的组件。本文首先介绍了Bootstrap ...
【Vue.js结合现代JS】：打造极致用户体验的表格组件
[【Vue.js结合现代JS】：打造极致用户体验的表格组件](https://www.codevertiser.com/static/35ef3a0088fdfa88ddaf7e8efe03a62c/963ed/Reactjs-Editable-Table.png) # 摘要 本文系统地介绍了Vue.js表格组件的设计与...
Vue+bootstrap实现增删改查批量删除
05-25
Vue.js是目前非常流行的前端JavaScript框架，它提供了组件化开发、响应式数据绑定等功能，使开发者能够高效地构建用户界面。而Bootstrap则是一个广泛使用的前端UI框架，提供了丰富的样式和布局组件，可以快速搭建...
BootStrap的表格加载json数据，并且可以搜索，选择
dengtangda9444的博客
03-28 550
　　2018.4.11日更新，8号的时候我推荐去官网下载，但是那个版本不知道为什么我无法使用$table.bootstrapTable('getSelections'); 无论如何。。。然后我尝试着更换了NuGet里面的bootstrap-table,然后就可以了.....需要一题的是，Nuget里面有两个bootstrap-table,只需要下载那个MVC的就可以了，第一个没卵...
bootstrap-table无法加载json数据
热门推荐
柒浅的博客
04-11 2万+
bootstrap-table无法加载json数据问题：可以获取后台传过来的json数据但是无法在table中显示出来 解决方案：添加responseHandler 注意：用json加载数据 table 标签不能写 data-toggle=”table” 属性<!--list.ejs --> <table id="userlist"></table>/*list.js*/ var tabIni
bootstrap-table 获取所有数据_源码讲解如何实现BootstrapTable静态赋值、初始化
weixin_39767386的博客
01-22 1246
今天要做一个报表导入并预览的功能，使用layui的文件上传，获取表格数据，接着把表格数据返回前台，使用bootstraptable展示，实现一个预览表格数据的效果。通过后台处理后的数据bootstraptable加载数据，其实具体实现不难，今天要讲的是在实现数据加载之后，我们出现了一些问题，我会附源码讲解问题的解决方案分享给大家通过后台处理后的数据// 数据经过处理后,真实数据已做修改Data =...
VUE-002-el-table-column两种赋值方式
weixin_42504805的博客
06-15 6153
VUE-002-el-table-column两种赋值方式
vue中表格中列属性自定义赋值以及slot-scope=“scope“，row的用法，以及结合 v-if 的用法
qq_45830276的博客
07-24 8259
vue表格自定义赋值操作，结合通过使用template标签，以及使用vue的v-if标签进行表格的自定义展示的，能够让我们实现对特殊数据的特殊处理。
vue.js 实现导入json解析成动态el-table树表格（接口文档功能）
lemon今天学习了吗？的博客
01-29 6224
一、需求描述：前段时间接到一个需求是做一个类似接口文档的显示功能，将一段json数据贴到里面就可以自动解析出json数据的每个字段的类型和层级关系，用element组件的树表格的形式展示，并且可以手动新增、修改和删除某个数据字段。{"name":"lemon","sex":"女","age":18,"hobby":{"hobby1":"敲代码","hobby2":"跳恰恰"},"likeArr":["水果","青菜"]}3.点击确认后树表格自动展示贴入的json数据，如下图所示；
Vue表单双绑、组件
The_Beacon的博客
10-05 418
1、什么是双向数据绑定 Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。   值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。 1.1、为什么要实现数据的双向绑定 在Vue.js中，如果使用vuex， 实际上数据还是单向
vue访问本地静态json文件
qq_30807661的博客
03-15 1万+
1、将写好的 data.json 文件放入static目录2、访问路径 get("./../static/data.json")
vue 搭建本地JSON静态数据服务器
Betrayer_hobby的博客
01-04 1992
在日常开发中,可能由于后端任务较重,接口不能及时提供给前端,领导要求先展示页面的要求下,这个时候就需要假数据,如果自己data里面定义假数据或html中直接写死,如果页面多了,后面接口提供的时候,修改会很麻烦. 此文提供一种本地本地json serve方案,除上述问题,此方案更加可以方便和后端协商所需数据字段格式. 一.仅供本地测试用 ,无法部署在服务器上取数据 1.安装全局的json-server工具包 npm install -g json-server 2.在项目更目录(src同级)下创建moc
<template>   <div class="card">   <div class="card-header">    学习计划表   </div>   <div class="card-body">     <div class="row">           </div>     <div class="col-auto">   <div class="input-group">     <span class="input-group-text">学习科目</span>     <input v-model.trim="subject" type="text" class="form-control" placeholder="请输入学习科目">     </div>   </div>     <div class="col-auto">       <div class="input-group">         <span class="input-group-text">学习内容</span>         <textarea v-model.trim="content" style="height:32px;" class="form-control" placeholder="请输入学习内容"></textarea>       </div>     </div>   </div>   <div class="col-auto">     <div class="input-group">       <span class="input-group-text">学习地点</span>       <select class="form-select" v-model="selectedOption">         <option v-for="option in options" :value="option.place" :key="option.placeCode">           {{ option.place }}         </option>       </select>     </div>   </div> </div> <form @submit.prevent="add" class="row">   <div class="col-auto">     <div class="input-group">       <span class="input-group-text">学习科目</span>       <input type="text" class="form-control" placeholder="请输入学习科目">    </div>    </div>    <div class="col-auto">      <div class="input-group">     <span class="input-group-text">学习内容</span>    <textarea style="height:32px" placeholder="请输入学习内容" class="form-control"></textarea>   </div>   </div>   <div class="col-auto">     <div class="input-group">   <span class="input-group-text">学习地点</span>   <select class="form-select">     <option value="1">自习室</option>     <option value="2">图书馆</option>     <option value="3">宿舍</option>   </select> </div>   </div>   <div class="col-auto">     <button class="btn btn-primary" type="submit">添加</button>   </div> </form> <table class="table table-hover">   <thead>     <tr>       <th scope="col">序号</th>       <th scope="col">学习科目</th>       <th scope="col">学习内容</th>       <th scope="col">学习地点</th>       <th scope="col">完成状态</th>       <th scope="col">操作</th>     </tr>   </thead>   <tbody>     <tr>     <td>1</td>     <td>Vue.js 前端实战开发</td>     <td>学习指令，例如 v-if, v-for, v-model 等</td>     <td>自习室</td>     <td>       <div class="form-check form-switch">         <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">         <label class="form-check-label" for="flexSwitchCheckDefault">未完成</label>       </div>     </td>     <td>       <a href=" " @click="remove(item.id, item.status)">删除</a >     </td>     </tr>   </tbody> </table> <div class="form-check form-switch">   <input v-model="item.status" :id="'sw'+item.id" class="form-check-input" type="checkbox" role="switch">   <label v-if="item.status" class="form-check-label" :for="'sw'+item.id">已完成</label>   <label v-else class="form-check-label" :for="'sw'+item.id">未完成</label> </div> </template> <script setup> import { ref,reactive } from 'vue'; const remove = (id,status) =>{   if(status){   list.value = list.value.filter(item => item.id !== id)   }else{     alert("请先完成该计划！")   } } const list = reactive([]); const subject = ref(""); const content = ref(""); const nextId = ref(""); const selectedOption = ref('自习室'); const option = reactive([   {placeCode:0, place:'自习室',},   {placeCode:1, place:'图书馆',},   {placeCode:2, place:'宿舍',}, ]); const add = () =>{   if(subject.value === ''){     alert('学习科目为必填项！')     return   }else if(content.value === ''){   alert("学习内容为必填!")   return } nextId.value = Math.max(...list.value.map(item => item.id)) + 1 const obj = {   id: nextId.value,   subject: subject.value,   content:content.value,   place:selectedOption.value,   status:false } list.value.push(obj) subject.value = '' content.value = '' selectedOption.value = '自习室' } </script>修改此代码
最新发布
03-28
好的，我现在需要帮用户修改这段Vue.js的代码。首先，我得仔细看看用户提供的代码结构，找出可能的问题和可以优化的地方。 首先，用户代码的模板部分有一些结构问题。比如，最外层的div.card-body里面，row和col-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值