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 ...
随机推荐
- linux ---jenkins的安装与配置
linux下的jenkins的安装: Jenkins 下载网址: http://jenkins-ci.org/ 1.准备:JDK环境,tomcat环境,maven环境,jenkins.war包 2.在 ...
- 给MySQL增加一个表示例
仅为记录用,图样图升破,看客速退散. create table logtable( id int(20) PRIMARY KEY AUTO_INCREMENT, concept varchar ...
- [ kvm ] 四种简单的网络模型
1. 隔离模式:虚拟机之间组建网络,该模式无法与宿主机通信,无法与其他网络通信,相当于虚拟机只是连接到一台交换机上. 2. 路由模式:相当于虚拟机连接到一台路由器上,由路由器(物理网卡),统一转 ...
- Passing address of non-local object to __autoreleasing parameter for write-back
在希望通过函数的參数返回Objective-C对象的时候.遇到了这个问题 错误代码例如以下: - (void)methodA:(NSString **)string<span style=&qu ...
- Appium Python 四：怎样获取APP的Package以及Activity
看到一篇很好的博客:[Android测试][随笔]获得App的包名和启动页Activity 除了博客上的方法,我还找到两种方法: 方法一:aapt 前提需要使用SDK Manager.exe 下载 A ...
- 【二】Drupal 入门之新建主题
Drupal 的模板是以 *.tpl.php 命名的 php 文件 1.在Drupal中,默认模板路径为 moudles/system 这就是我们为什么还没有制作模板 Drupal 就能够正常显示 ...
- spring boot 环境搭建
1.开发工具 https://spring.io/tools/sts/all 2.demo https://start.spring.io 3.下载maven https://maven.apache ...
- JavaWeb get请求乱码处理
乱码终极解决方案 Author:Marydon 一.安装好eclipse/myeclipse后,先将开发环境改成UTF-8; 更改工作空间编码方式 window-->preferences- ...
- TCP并发server模型（三）
本篇博客讲述的是单client单线程模型,该模型相同由主进程统一accept,仅仅是将fork改为了pthread_create. 与进程相比,线程有非常多长处(速度快,占用资源少.数据能够共享). ...
- poi读取execl的日期
当execl中的列为日期格式时,后台读取到是一个数字,通过如下代码可以直接读取并转换到Date类型 HSSFDateUtil.getJavaDate(cell.getNumericCellValue( ...