Vue经典题型demo 练习
编辑 提交 删除 练习
·
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<style>
[v-cloak] {
display: none }
.btn-circle {
border-radius: 3px;
border: 1px solid #c0c0c0;
cursor: pointer;
display: inline-block;
width: 16px;
height: 16px;
}
</style>
</head>
<body>
<section class="container" id="app">
<h2 class="text-center">学生信息表</h2>
<!-- 表单 -->
<form class="form-horizontal">
<div class="form-group">
<label for="inputName" class="col-sm-3 col-sm-offset-1 control-label">学生姓名:</label>
<div class="col-sm-5">
<input type="text" class="form-control" v-model="inputName" placeholder="学生姓名">
</div>
</div>
<!-- form-group充当的就是row -->
<div class="form-group">
<label for="inputPhone" class="col-sm-3 col-sm-offset-1 control-label">联系方式:</label>
<div class="col-sm-5">
<input type="text" class="form-control" v-model="inputPhone" placeholder="联系方式">
</div>
</div>
<div class="form-group">
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-success" @click="addData" v-show="showOrHide">
<span class="glyphicon glyphicon-plus"></span> 添加信息
</button>
<button type="button" class="btn btn-warning" @click="confirmEdit" v-show="!showOrHide" style="display:none">
<span class="glyphicon glyphicon-ok"></span> 确认编辑
</button>
</div>
</div>
</form>
<!-- 表格 -->
<table class="table" v-show="stus.length">
<thead>
<tr>
<th class="text-center col-sm-3">学号</th>
<th class="text-center col-sm-3">学生姓名</th>
<th class="text-center col-sm-3">联系方式</th>
<th class="text-center col-sm-3">操作</th>
</tr>
</thead>
<tbody id="showData" v-cloak>
<tr class="text-center" v-for="(item,index) in stus" :key="index" :class="{'bg-danger':!item.isFinished}">
<th class="text-center">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
<td>
<button type="button" class="btn btn-default btn-sm btn-edit" @click="editData(index)">
<span class="glyphicon glyphicon-edit"></span> 编辑</button>
<button type="button" class="btn btn-default btn-sm btn-del" data-toggle="modal" data-target=".bs-example-modal-sm" @click="findIndex(index)">
<span class="glyphicon glyphicon-remove-sign"></span> 删除
</button>
<span class="glyphicon btn-circle" @click="isOk(index)" :class="{'glyphicon-ok':!item.isFinished}"></span>
</td>
</tr>
<tr class="text-center">
<td>总人数为{{lenNum}}</td>
<td>未及格人数{{noFinished}}</td>
<td>及格人数{{finished}}</td>
<td class="text-center">
<button type="button" class="btn btn-danger btn-trash" data-toggle="modal" data-target=".bs-example-modal-sm" @click="clearBtn">
<span class="glyphicon glyphicon-trash"></span> 清空</button>
</td>
</tr>
</tbody>
</table>
<div class="alert alert-warning text-center" role="alert" id="warning" style="display:none" v-show="!stus.length">暂无数据......</div>
<!-- 模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-danger">{{tips}}</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary btn-danger" data-dismiss="modal" @click="removeData">确定</button>
</div>
</div>
</div>
</div>
</section>
</body>
<script src="lib/jquery/jquery.min-v1.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/vue/vue.js"></script>
<script>
(function (Vue) {
var data = [{
id: 'ID1505043900575',
name: '小黑',
phone: 1232222,
isFinished:true
},
{
id: 'ID1505043903711',
name: '小白',
phone: 1233333,
isFinished:false
},
{
id: 'ID1505043906767',
name: '小花',
phone: 1234444,
isFinished:true
},
{
id: 'ID1505043941174',
name: '小小',
phone: 1235555,
isFinished:false
}
];
var app = new Vue({
el:'#app',
data:{
stus:data,
inputName:'',
inputPhone:'',
index:0,
showOrHide:true,
tips:''
},
computed:{
lenNum:function(){
return this.stus.length;
},
finished:function(){
var count=0;
for(var i=0;i<this.stus.length;i++){
if(this.stus[i].isFinished){
count++;
}
}
return count;
},
noFinished:function(){
return this.lenNum-this.finished;
}
},
methods:{
addData:function(){
var dt={
id:'ID'+new Date().getTime(),
name:this.inputName,
phone:this.inputPhone,
isFinished:true
}
this.stus.push(dt);
this.inputName=this.inputPhone='';
},
findIndex:function(i){
this.index=i;
this.tips='\u60a8\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f\uff1f\uff1f';
this.showOrHide=true;
this.inputName=this.inputPhone='';
},
removeData:function(){
if(this.index===-2){
this.stus=[];
}else{
this.stus.splice(this.index,1);
}
},
editData:function(i){
this.index=i;
this.inputName=this.stus[i].name;
this.inputPhone=this.stus[i].phone;
this.showOrHide=false;
},
confirmEdit:function(){
this.stus[this.index].name=this.inputName;
this.stus[this.index].phone=this.inputPhone;
this.showOrHide=true;
this.inputName=this.inputPhone='';
},
clearBtn:function(){
this.index=-2;
//在windows、windows service 默认以GBK的编码方式跟你保存
//linux、unix、windows service 服务端的系统
this.tips='\u60a8\u786e\u5b9a\u8981\u6e05\u7a7a\u5417\uff1f\uff1f\uff1f';
this.showOrHide=true;
this.inputName=this.inputPhone='';
},
isOk:function(i){
this.stus[i].isFinished=!this.stus[i].isFinished
}
}
});
})(Vue)
</script>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献13条内容
所有评论(0)