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

最新推荐文章于 2024-06-25 09:36:15 发布
最新推荐文章于 2024-06-25 09:36:15 发布
阅读量8.3k 收藏
点赞数 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>
stevennest
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用vue.js把静态json绑定bootstrap的table方法
10-18
在本文中，我们将探讨如何使用Vue.js将静态JSON数据绑定到Bootstrap的表格中，从而创建一个动态且交互式的数据展示界面。Vue.js是一个轻量级的前端JavaScript框架，它提供了数据绑定和组件化的能力，使得构建用户...
Vue 读取本地静态文件 json【2种方法及优缺点】_vue 从assets中读取json
2301_82243710的博客
05-16 734
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
在vue项目中如何使用静态json文件
m0_52872381的博客
03-11 1021
2.然后在组件的mounted钩子函数下进行获取。1.首先将jso文件引入到public文件夹下。
**拥抱强大与灵活的** `vue2-bootstrap-table`: 构建美观的表格从未如此简单！
最新发布
gitblog_00049的博客
06-25 318
拥抱强大与灵活的 vue2-bootstrap-table: 构建美观的表格从未如此简单！ 项目地址:https://gitcode.com/jbaysolutions/vue2-bootstrap-table 一、项目介绍 在前端开发中，优雅而功能齐全的数据展示是提升用户体验的关键之一。vue2-bootstrap-table, 正是一款基于Vue.js和Bootstrap设计风格的强大表格组件...
bootstrap table绑定数据源（带分页）
weixin_42064877的博客
07-05 763
bootstrap table绑定数据源 带分页
Vue表单绑定
weixin_66059613的博客
10-23 764
表单绑定
vue.js 实现导入json解析成动态el-table树表格（接口文档功能）
lemon今天学习了吗？的博客
01-29 5598
一、需求描述：前段时间接到一个需求是做一个类似接口文档的显示功能，将一段json数据贴到里面就可以自动解析出json数据的每个字段的类型和层级关系，用element组件的树表格的形式展示，并且可以手动新增、修改和删除某个数据字段。{"name":"lemon","sex":"女","age":18,"hobby":{"hobby1":"敲代码","hobby2":"跳恰恰"},"likeArr":["水果","青菜"]}3.点击确认后树表格自动展示贴入的json数据，如下图所示；
bootstrap vue.js实现tab效果
10-20
`<ul>` 列表中的 `<li>` 标签内有 `<a>` 链接，其 `href` 属性为空，实际的切换效果是通过 JavaScript 或 Vue.js 的数据绑定来实现的。选项卡内容使用 `<div>` 包裹，并为每一个内容区域设置了 `tab-pane fade` 类，...
如何配置vue.config.js 处理static文件夹下的静态文件
10-15
在Vue.js应用开发中，尤其是使用Vue CLI 3.x或更高版本时，有时我们需要处理`static`文件夹下的静态资源，比如图片、字体文件或JSON数据。这些文件不会被webpack自动处理，因此需要进行额外的配置。本文将详细介绍...
vue.js 下载，引入vue.js 本地开发
05-18
Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易学易用、组件化和高性能的特点深受开发者喜爱。本文将详细介绍如何下载Vue.js并进行本地开发。 首先，我们需要下载Vue.js。Vue.js的官方源码可以从其官方...
bootstrap-table动态加载json数据并且支持分页
03-16
bootstrap-table动态加载json数据并且支持分页。摘要必须大于50个字节！
Vue 读取本地静态文件 json【很全，很详细】
小道仙的后宫
12-29 4万+
所有文章优先发布在个人博客上，后续更新可能会忘记同步到CSDN上。给你带来不便抱歉。 个人博客此篇文章：https://www.xdx97.com/article?bamId=654798704103915520 方法一：require 格式： var json = require('文件的相对地址'); 优点：可以按照你写的顺序去执行，没有任何书写方面的局限。 缺点：当你...
vue 搭建本地JSON静态数据服务器
Betrayer_hobby的博客
01-04 1879
在日常开发中,可能由于后端任务较重,接口不能及时提供给前端,领导要求先展示页面的要求下,这个时候就需要假数据,如果自己data里面定义假数据或html中直接写死,如果页面多了,后面接口提供的时候,修改会很麻烦. 此文提供一种本地本地json serve方案,除上述问题,此方案更加可以方便和后端协商所需数据字段格式. 一.仅供本地测试用 ,无法部署在服务器上取数据 1.安装全局的json-server工具包 npm install -g json-server 2.在项目更目录(src同级)下创建moc
【Vue+Flask】Vue获取本地静态资源（Json）的几种方式
yuelizhe4774的博客
08-10 2939
这种方法和上述方法差不多，都是一次加载文件，虽然之后我可以对数据进行更改，但是由于一次加载后，会将缓存文件存储在浏览器中，第二次调用还是第一次的文件。（通过对路由名称的定义可以解决这个问题，不过会有点麻烦）当然也有很多的解决办法（数据存在tomcat、配置其他环境等），但是，我已经要用Vue做前端，Flask做服务端，如果再使用别的，那不会变得更加麻烦吗。示例的路由结构式普通的，路由地址可以作为参数传递到下面的函数之中，通过这样的搭配，可以解决不同场景的需求，由于我觉得这样也挺麻烦的，所以想了第三种方法。.
Vue 读取本地静态文件 json【2种方法及优缺点】
IT博客技术分享
11-01 4958
使用vue读取本地的静态文件。 方法一：require 格式： var json = require('文件的相对地址'); 优点：可以按照你写的顺序去执行，没有任何书写方面的局限。 缺点：当你打包的时候，它很可能被打包到 js 中去，出现这种情况基本就凉凉了。你的 js 超级大。网站基本无法访问。 解决：你的 js ，很大但是你可以把它cdn加速。这样虽然很方便，但是你的流量就会消...
Vue 在项目中引入本地Json数据
热门推荐
小镇青年
07-16 4万+
模拟的Json数据放入项目的根目录中。在build文件夹中，找到 webpack.dev.conf.js ,我们需要在这个js文件中配置Json在它后面加上配置数据就OK //第一步 const portfinder = require('portfinder'),在后面加上 const express = require('express'); const app = express();//请...
vue访问本地静态json文件
qq_30807661的博客
03-15 1万+
1、将写好的 data.json 文件放入static目录2、访问路径 get("./../static/data.json")
vue 引用静态json文件
weixin_39999684的博客
01-29 2449
import(es6) import jsonData from './xxx/xxx.json' require(node) const jsonData = require('./xxx/xxx.json') ajax(axios) 异步 axios.get('./xxx/xxx.json').then(res=>{console.log(res)})
Vue.js实战：数据绑定与PLC控制解析
Vue.js 是一款轻量级的前端JavaScript框架，以其简单易用、高效的数据绑定和组件化开发能力，在Web开发领域受到广泛欢迎。在“数据绑定-冷水机组的PLC控制”这个主题中，我们可以看到Vue.js是如何被应用于工业自动化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值