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 ...
随机推荐
- js 特效
栏目1 栏目1->菜单1 栏目1->菜单2 栏目1->菜单3 栏目1->菜单4 栏目2 栏目2->菜单1 栏目2->菜单2 栏目2->菜单3 栏目2-> ...
- （数据挖掘-入门-6）十折交叉验证和K近邻
主要内容: 1.十折交叉验证 2.混淆矩阵 3.K近邻 4.python实现 一.十折交叉验证 前面提到了数据集分为训练集和测试集,训练集用来训练模型,而测试集用来测试模型的好坏,那么单一的测试是否就 ...
- HTML5游戏，五子棋
在线演示 本地下载 最近html5的游戏还真是不少,这种在线游戏既简单又有趣.收藏几个在午休时间娱乐一下.何乐而不为呢?喜欢研究的可以下载代码看看.超级推荐!
- Discuz常见大问题-如何允许用户插入视频-如何自己在页面中插入视频
从视频的下面分享中获取html代码 然后粘贴到你创建页面的指定位置(注意从优酷复制的视频宽度和高度可能比较小,你可以自己调整,或者占据100%) 最终的实现效果
- 微信小程序 - 获取所在位置(省、市、区)
实现步骤 1. 获取当前经纬度 2. 调用腾讯(百度.高德)地图对应的请求地址,一般都会有独一的key, 譬如 腾讯地图调用地址: https://apis.map.qq.com/ws/geocode ...
- eclipse 代码上传github 笔记
第一步 先share project 如图所示 第二步 如果所示 第三步 点击 下面的create 然后点击完成 第四步提交 第五步: 第六步:
- Hessian整合Spring
含实例源码博客推荐:http://blog.csdn.net/julyness/article/details/49023581 简介: Hessian是一个简单的连接Web服务的二进制协议. 客户端 ...
- sqlserver 创建对某个存储过程执行情况的跟踪
有时候需要抓取执行存储过程时某个参数的值,有时候程序调用存储过程执行后结果不太对,不确定是程序的问题还是存储过程的问题,需要单独执行存储过程看结果 即可用下面的方法 --=============== ...
- webservice系统学习笔记7-使用handler实现过滤器/拦截器效果
handler可以作用于客户端,也可以作用了服务端 handler分为:1.LogicalHandler:只能获取到soap消息的body. 2.SOAPHandler:可以获取SOAPMessage ...
- 修改模块搜索路径(注意：py运行完毕，就会失效，他只是临时产生效果)
# -*- coding: utf-8 -*- #python 27 #xiaodeng #修改模块搜索路径(注意:py运行完毕,就会失效,他只是临时产生效果) import sys print sy ...