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 ...
随机推荐
- Memcached和Memcache 配置教程windows X64
一.Memcached和Memcache的区别: 网上关于Memcached和Memcache的区别的理解众说纷纭,我个人的理解是: Memcached是一个内存缓存系统,而Memcache是php的 ...
- C#.NET常见问题(FAQ)-interface接口如何理解
个人把interface理解为一种比较特殊的判断技巧,不是常规的变量类型比如判断字符串,判断数组,而是判断类的实例是否拥有某些属性或者方法(比如有十个女的穿一样的衣服,头上盖住,让新郎去猜哪一个是他的 ...
- 如何自定义CollectionView中每个元素的大小和间距
问题: 让每个元素大小变为104 x 104 Step 1: 在你的视图控制器头文件中实现UICollectionViewFlowLayout协议 eg: @interface XXViewContr ...
- ZH奶酪：JavaScript中的JSON.stringify() and JSON.parse()
JSON.stringify() JSON.stringify()可以将任意的JavaScript值序列化成JSON字符串. 语法 JSON.stringify(value[, replacer [, ...
- JavaScript 之 截取字符串函数
一.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str=”jpg|bmp|gif|ico|png”; arr=theString.split(”|”); //a ...
- 输出python的help结果到文件中
1.命令行方式: python -c "import sys; help(sys.exit)" > help.txt 2.函数代码的方式输出 def help_output( ...
- mac 安装升级python3
如果没有安装过python3的话那就直接下载dmg文件安装升级,一般下载安装后的路径为 /Library/Frameworks/Python.framework/Versions 如果同时安装了多个p ...
- Centos定时执行python脚本
其实就是linux的定时任务.老记不住参数,这次写下来,省着老百度.本文没有技术含量,请大家不要吐槽. ================================================ ...
- （一）Linux实操之——权限、任务调度、磁盘分区
1. 权限 1.1 查看权限 通过ls -l命令可以看到文件的详细信息 下面以一条信息解释各个位置字符的作用 -rwxr--r--. 1 root root 32 6月 18 10:15 choose ...
- 使用nginx生成缩略图
nginx中可以使用 --with-http_image_filter_module 这个模块,今天发现在github上发现国人开发的一款模块 模块同时支持 Nginx 和 tengine 本ngin ...