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 ...
随机推荐
- 在Fedora8上安装MySQL5.0.45的过程
本来想安装最新的5.6.13-1版本,下载下来后,依赖的包rpmlib无处下载,无法只得作罢.从Foreda8的安装光盘中找到了以下文件: mysql-5.0.45-4.fc8.i386.rpm my ...
- Weixin 之 微信二维码扫描下载 Apk
制作的手机 app 需要上线,生成二维码扫描进行下载,把生成好的apk挂在服务器端,将地址复制下来,通过草料二维码(http://cli.im/)生成一个二维码. 在更多中,你会看到有个app的选项, ...
- 高德地图引入库错误std::string::find_first_of(char const*, unsigned long, unsigned long) const"
一:std:编译器错误解决 二:错误提示 "std::string::find_first_of(char const*, unsigned long, unsigned long) con ...
- es6-块级作用域let 和 var的区别
块级绑定 js的处理机制和我们大家想象的完全不同,并不完全是所谓函数调用以及上下执行那样简单,它是存有”域”的本质区别的. var具有全局污染特性,所以es6才会出现let .const. 下面通过一 ...
- PHP高级教程-异常处理（Exception）
PHP 异常处理 异常用于在指定的错误发生时改变脚本的正常流程. 异常是什么 PHP 5 提供了一种新的面向对象的错误处理方法. 异常处理用于在指定的错误(异常)情况发生时改变脚本的正常流程.这种情况 ...
- Hibernate生成实体类-手工写法(一)
BaseDao package com.pb.dao; import java.sql.Connection; import java.sql.DriverManager; import java.s ...
- python解析发往本机的数据包示例 (解析数据包)
tcp.py # -*- coding: cp936 -*- import socket from struct import * from time import ctime,sleep from ...
- C++ union使用注意
union在我们敲代码的时候的使用概率远远小于struct.所以我们常常不太关心她.就知道他是使用内存复用技术.同一个时刻,他仅仅能存在一个成员的值. C中,我们在union中能够包括struct的, ...
- OpenERP 负载平衡
OpenERP 7.0 带来了许多新特性,架构上也有许多改进.其中可配置 worker 参数,可使 OpenERP 运行在多进程模式,突破GIL的限制,有效利用了现代多核CPU的性能.但默认情况下,O ...
- 解决python：'ascii' codec can't encode characters in position问题
今天把一个列表转换成字符串输出的时候出现了UnicodeEncodeError: 'ascii' codec can't encode characters in position 32-34: or ...