Vuejs2.0 + bootstrap demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="../../plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="./vue.js"></script>
<script src="./vue.js"></script>
<script src="../../plugins/jquery-1.9.1.min.js"></script>
<script src="../../plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Vuejs2.0 demo</title>
</head>
<body > <div id="app"> <form action="" onsubmit="return false;" role="form">
<div class="form-group">
<label class="control-label" for="inputName">姓名:</label>
<div class="controls">
<input type="text" id="inputName" placeholder="输入姓名" v-model="stu.name" class="form-control">
</div>
</div>
<div class="form-group">
<label class="control-label" for="inputAge">年龄:</label>
<div class="controls">
<input type="text" id="inputAge" placeholder="输入年龄" v-model="stu.age" class="form-control">
</div>
</div> <div class="control-group">
<button class="btn btn-small btn-primary" v-on:click="add();">添加</button>
<button type="reset" class="btn btn-small btn-danger">重置</button> </div>
</form> <table class="table table-striped table-bordered">
<caption class="h2 text-center">用户信息</caption>
<tr><th>序号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
<!--<tr>
<td>1</td><td>lisi</td><td>20</td><td><button class="btn btn-small">删除</button></td>
</tr>
<tr>
<td>2</td><td>lisi</td><td>30</td><td><button class="btn btn-small">删除</button></td>
</tr>-->
<tr v-for="(stu,index) in studata">
<td>{{index + 1}}</td><td>{{ stu.name }}</td><td>{{ stu.age }}</td><td><button class="btn btn-small" v-on:click="del(index);">删除</button></td>
</tr> <tr v-show="studata.length!=0">
<td colspan="4" class="text-center">
<button class="btn btn-small btn-danger" v-on:click="delAll();">全部删除</button>
</td>
</tr> <tr v-show="studata.length==0">
<td colspan="4" class="text-center">暂无数据</td>
</tr>
</table> <!-- <div id="box">
<input type="text" v-model="msg">
<span>{{msg}}</span>
</div>-->
</div> <script>
window.onload = function(){
new Vue({
el:"#app",
data:{
msg:"用户信息表",
studata:[],
stu:{name:"",age:""}
},
methods:{
add:function(){
//this.stu = {name:"lisi",age:"20"};
this.studata.push(this.stu);
this.stu = {};
},
del:function(n){
this.studata.splice(n,1);
},
delAll:function(){
this.studata = [];
}
}
});
}
</script> </body>
</html>
Vuejs2.0 + bootstrap demo的更多相关文章
- VueJs2.0建议学习路线
最近VueJs确实火了一把,自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢. 既然大家会看这篇文章,那么 ...
- vuejs2.0使用Sortable.js实现的拖拽功能
简介 在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但 ...
- vuejs2.0与1.x版本中怎样使用js实时访问input的值的变化
vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-el ...
- 使用vuejs2.0和element-ui 搭建的一个后台管理界面
说明: 这是一个用vuejs2.0和element-ui搭建的后台管理界面. 相关技术: vuejs2.0:一套构建用户界面的渐进式JavaScript框架,易用.灵活.高效. element-ui: ...
- 从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建）
原网址:https://blog.csdn.net/u012907049/article/details/72764151 前言 VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用v ...
- VUEJS2.0源码理解--优
VUEJS2.0源码理解 http://jiongks.name/blog/vue-code-review/#pingback-112428
- vuejs2.0 文档
http://vuejs.org/ vuejs2.0 英文文档 https://vuefe.cn/ vuejs2.0 中文文档
- Vuejs2.0构建一个彩票查询WebAPP(2)
一,Vuex的使用 import Vue from 'vue' import Vuex from 'vuex' import MsgModules from './MsgModules' Vue.us ...
- Vuejs2.0构建一个彩票查询WebAPP(1)
说明:本人也是刚接触VUE.js,作为一个学习笔记,旨在与初学者共同学习.其中编程语法错误或者写作水平刺眼,还望轻喷. 使用工具:Visual Studio Code.技术栈为vue2+vuex+ax ...
随机推荐
- 【Nodejs】使用nimble串行化回调任务
nodejs的nimble模块可以使我们对回调任务进行串行化,它需要先安装 #npm install nimble 用法也方便,示例代码如下: //========================== ...
- ab测试工具参数详解
-n 测试会话中所执行的请求个数,默认仅执行一个请求 -c 一次产生的请求个数,即同一时间发出多少个请求,默认为一次一个 -t 测试所进行的最大秒数,默认为无时间限制....其内部隐含值是[-n 50 ...
- 帝吧fb出征是什么原因？帝吧fb出征事情始末 帝吧出征FB打“台独” 台湾网民崩溃：巨人之墙爆了
帝吧出征FB打"台独" 台湾网民崩溃:巨人之墙爆了 发表时间:2016-01-20 21:08:10 字号:A-AA+ 关键字: 帝吧帝吧出征FB帝吧出征FB打台独台独脸书巨人之墙 ...
- Java从零开始学二十五(枚举定义和简单使用)
一.枚举 枚举是指由一组固定的常量组成的类型,表示特定的数据集合,只是在这个数据集合定义时,所有可能的值都是已知的. 枚举常量的名称建议大写. 枚举常量就是枚举的静态字段,枚举常量之间使用逗号隔开. ...
- 栈溢出笔记1.3 准备Shellcode
经过1.1和1.2节的讲述,我们已经知道了怎样更改EIP的值. 程序运行函数之后将跳转到我们设定的位置開始运行,因此,我们须要准备一个自己的程序,接手后面的工作.这是一个什么样的程序?是一个C语言编写 ...
- 算法笔记_208:第六届蓝桥杯软件类决赛真题(Java语言A组)
目录 1 胡同门牌号 2 四阶幻方 3 显示二叉树 4 穿越雷区 5 切开字符串 6 铺瓷砖 前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 胡同门牌号 标题:胡同门牌号 小明家住在一条胡同里. ...
- 1z0-052 q209_9
9: You are working on an instance started using the SPFILE. You want to move the Flash Recovery Area ...
- Codeforces Round #265 (Div. 2) D. Restore Cube 立方体推断
http://codeforces.com/contest/465/problem/D 给定8个点坐标.对于每一个点来说,能够任意交换x.y,z坐标的数值. 问说8个点能否够组成立方体. 暴力枚举就可 ...
- OpenERP 的XML-RPC的轻度体验+many2many,one2many,many2one创建方式
来自:http://cn.openerp.cn/openerp_import_image_by_xmlrpc/ 每当夏秋之交,我们都有展会,展会完后,都有很多的新的潜在客户要添加,我们收了一大堆名片, ...
- My Magic Android Tour —— 处女作
近期考试什么的都已经结束了,闲在家也没什么事做,就想着学点什么,于是便选择了学一下Android开发.一直在使用Android手机.要是自己能为自己的手机开发一个APP就好了. 好了,也不扯些废话了, ...