您的位置：首页 > 产品设计 > UI/UE

vue简单实例（todolist）

2017-10-25 16:23 573 查看

本实例运用vue的一些常用指令如：v-for,v-on,v-model等；

v-on:click=”“可简写为@click=“”

vue+bootstrap实战

注：bootstrap是基于jQuery的，所以引入bootstrap的同时，需引入jQuery。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
myData:[],
username:'',
age:'',
wage:''
},
methods:{
add:function(){
this.myData.push({
name:this.username,
age:this.age,
wage:this.wage//当点击添加时将name，age,wage推入myData中
});
this.username='';
this.age=''; //清空值
this.wage='';
},
deleteMsg:function(n){
if(n==-2){
this.myData=[];//点击全部删除
}else{
this.myData.splice(n,1);//删除
}
}
}
})
}
</script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" class="form-control" id="username" v-model="username"   placeholder="请输入用户名.."/>
</div>
<div class="form-group">
<label for="age">年 龄:</label>
<input type="text" class="form-control" id="age" v-model="age" placeholder="请输入年龄.."/>
</div>
<div class="form-group">
<label for="wage">工 资:</label>
<input type="text" class="form-control" id="wage" v-model="wage" placeholder="工资.."/>
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" @click="add()"/>
<input type="reset" value="重置" class="btn btn-danger"/>
</div>
</form>
<hr/>
<table class="table table-bordered table-hover">
<caption class="h3">用户信息表</caption>
<tr>
<th class="text-center">序号</th>
<th class="text-center">用户名</th>
<th class="text-center">年龄</th>
<th class="text-center">工资</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="item in myData">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.wage}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
@click="nowIndex=$index">删除</button>
</td>
</tr>
<tr  v-show="myData.length!=0">
<td colspan="5" class="text-center">
<button class="btn btn-danger"  @click="nowIndex=-2" data-toggle="modal" data-target="#layer">全部删除</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan="5" class="text-center">
暂无数据.....
</td>
</tr>
</table>
<div role="dialog" class="modal" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
确认删除吗？
</div>
<div class="modal-body text-right">
<button class="btn btn-primary" data-dismiss="modal" @click="deleteMsg()">确认</button>
<button class="btn btn-danger" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航