利用vue.js把静态json绑定bootstrap的table方法
直接上代码
嘻嘻，发现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方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
在vue-cli项目中使用bootstrap的方法示例
在一个html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行. 那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下. 安装插件 npm install jquery --save npm install bootstrap --save npm install popper.js --save 配置webpack.base.conf.js //在顶部添加 const webpack = require('we
-
利用纯Vue.js构建Bootstrap组件
没有jQuery, bootstrap.js, 或不需要任何第三方插件. This repository contains a set of native Vue.js components based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are: Vue.js
-
Bootstrap Table使用方法详解
bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述.本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它. 首先交代一下,jquery ,bootstrap
-
bootstrap vue.js实现tab效果
本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下 项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu
-
利用vue.js把静态json绑定bootstrap的table方法
直接上代码 嘻嘻,发现bootstrap+vue.js拿来做原型效率挺高,以后就这样做原型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://cdn.b
-
利用Vue.js实现求职在线之职位查询功能
前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文主要介绍的是关于利用Vue.js实现职位查询功能的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 知识点: v-on, v-for, v-if, props, $emit,动态Prop, Class 与 Style 绑定 P1 分页查询 查询参数 查询参数:
-
利用vue.js实现被选中状态的改变方法
在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中.而使用vue之后,已经能够实现页面根据数据的多少动态生成.而且代码量也大幅度减少. html部分的代码: <div data-role="page " class="page "> <div class="center " id="app"> &
-
对Vue.js之事件的绑定(v-on: 或者 @ )详解
1.Vue.js事件绑定的一般格式 v-on:click='function' v-on:click/mouseout/mouseover/ @click 2.Vue.js事件绑定的实现 2.1 JavaScript代码 <script type="text/javascript" src="../js/vue-1.0.21.js"></script> <script type="text/javascript"&g
-
纯JS如何实现vue.js下的双向绑定功能
目录 首先说一下实现双向绑定的思路: 再说一下实现这些功能的js主要的方法有哪些: 最后需要创建哪些工具类? 实现vue双向绑定 看下面截图 这是一个普通的html文件,也并没有引入vue.js,是不是在代码中看到有些熟悉的地方?比如:"v-model","v-on:click",还有常用的"双花括号{{}}"赋值语句. 首先说一下实现双向绑定的思路: 一.创建一个自定义vue js对象,例如上面的wslVue 对象,初始化方法里面需要的参数有:
-
利用Vue.js实现checkbox的全选反选效果
前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'
-
vue.js学习笔记之绑定style样式和class列表
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q
-
如何利用vue.js实现拖放功能
前言 添加拖放功能是使你的程序更加自然和友好的方法.尽管有一些提供拖放功能的库,但是了解它们在底层的工作原理是非常有意义的. 在本文中,我们将用内置的 HTML 拖放 API 来实现简单的拖放系统.像这样: 拖放API HTML拖放API 是一种内置方法,它包含几个事件和属性,但是可以归纳为以两种类型的元素为思路来进行处理. 可拖动元素:可以被拖动的元素 可放置元素:可以接受被拖动元素的元素 如果这样分析,将会使分析拖放事件变得更加容易. 拖放事件 API 中有八个拖放事件可以用在我们程序中.
-
详解Vue.js Class与Style绑定
目录 Vue.js Class与Style绑定 绑定HTML Class 对象语法 数组语法 绑定内联样式 对象语法 数组语法 自动添加前缀 总结 Vue.js Class与Style绑定 对于数据绑定,一个常见的需求是操作元素的class列表和它的内联样式.因为它们都是attribute,我们可以用v-bind处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind用于class和style时,Vue.js专门增强了它.表达式的结果类型除了字符串以外,还可以是
-
利用Vue.js制作一个拼图华容道小游戏
目录 游戏介绍 核心思路 核心代码 html games 类 生成随机图片数量 移动图片 键盘事件 拼图完成 结语 游戏介绍 先看看界面 这是一个拼图游戏,可以自选难度和自选闯关图片 游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然后只要把乱序的小图片还原成完整的图片就闯关成功 游戏区域有一个空白位置,可以用鼠标点击空白位相邻的图片完成替换,也就是移动,也可以用键盘上下左右操作 游戏好玩,可不要贪杯哦,学习也不能落下,不管什么游戏都一样 这个虽然用到的技术很一般很简