<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
th{
text-align: center;
}
</style>
<script src="js/vue.min.js"></script>
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<div class="container">
<!-- 利用bootstrap实现快速布局 -->
<!-- 输入框（用户名，年龄） -->
<form class="form">
<!-- form-group为bootstrap提供样式 -->
<div class='form-group'>
<label>用户名</label>
<!-- form-control为bootstrap提供样式 -->
<input type="" name="" class="form-control" v-model="userName"/>
</div>
<div class='form-group'>
<label>年龄</label>
<input type="" name="" class="form-control" v-model="userAge"/>
</div>
</form>
<!-- btn btn-default btn-primary为bootstrap提供样式 -->
<!-- （确认：新规用户信息） -->
<input type="button" name="" class="btn btn-default btn-primary" value="确认" @click="add();">
<!-- （按年龄排序：排序） -->
<input type="button" name="" class="btn btn-default btn-primary" value="按年龄排序" @click="sort();">
<!-- bootstrap提供样式 -->
<!-- 条纹状表格 -->
<!-- 通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。 -->
<table class="table table-striped text-center" style="margin-top: 20px;">
<thead>
<tr>
<th>項番</th>
<th>用戶名</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for='i in rList'>
<td>{{$index+1}}</td>
<td>{{i.name}}</td>
<td>{{i.age}}</td>
<td><input type="button" value="刪除"
class="btn btn-default btn-danger btn-xs"
data-toggle="modal" data-target="#myModal"
@click="index=$index"></td>
</tr>
<tr v-show="rList.length?false:true">
<td colspan="4">請登錄用戶信息</td>
</tr>
<tr v-show="rList.length?true:false">
<td colspan="4"><input id="allDelBtn" value="全部删除"
class="btn btn-default btn-danger"
data-toggle="modal" data-target="#myModalAll"></td>
</tr>
</tbody>
</table>
</div><!-- /.主画面 -->
<!-- 明细里面的单条删除按钮 -->
<!-- 模态框部分，可从bootstrap官网 js插件tab那里直接粘过来 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" 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">hello 模态框</h4>
</div>
<div class="modal-body">
<p><b style="color: red;">{{rList[index].name}}</b>你确定要删除吗…</p>
<p>(模态框部分，可从bootstrap官网 js插件tab那里直接粘过来)</p>
</div>
<div class="modal-footer">
<!-- data-dismiss="modal"是用来 关闭模态窗的 -->
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" @click='del();' data-dismiss="modal">确定删除</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 最后那个全部删除按钮 -->
<!-- 模态框部分，可从bootstrap官网 js插件tab那里直接粘过来 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModalAll">
<div class="modal-dialog" 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">hello 模态框</h4>
</div>
<div class="modal-body">
<p style="color: red;">你确定要<b style="font-size: 16px;">全部</b>删除吗…</p>
<p>(模态框部分，可从bootstrap官网 js插件tab那里直接粘过来)</p>
</div>
<div class="modal-footer">
<!-- data-dismiss="modal"是用来 关闭模态窗的 -->
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" @click='allDel();' data-dismiss="modal">确定删除</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
// 登记表需求
// 输入框（用户名，年龄）
// 事件
// （确认：新规用户信息）
// （按年龄排序：排序）
// （每一条明细上面都有删除按钮，可以删除当前该条明细）
// 出力项目（用户信息一览）
// （没有用户信息的时候，请添加新的用户）
// （有用户信息的时候，可以全部删除）
// neww 一個 Vue的對象
// 構造函數的傳參 是一個json類型的數據類型
new Vue({
el:'body',
data:{
'defaultName' : '可爱静静',
'userName' : '可爱静静',
'defaultAge':18,
'userAge' : '18',
'rList':[],
'index':0,
'nameIndex':0
},
methods:{
add:function(){
// console.log(this.userName,this.userAge);
// rList是个集合类
// push的个json对象
// 在v-for='i in rList'
// 用v-for 去遍历的时候，i.name啊，i.age啊
// 就是去取json对象里面的key值即可
this.nameIndex++;
this.userName = this.defaultName + this.nameIndex;
this.userAge = this.defaultAge;
this.defaultAge--;
this.rList.push(
{
name:this.userName,
age:this.userAge
}
);
},
del:function(){
// console.log(this.index);
this.rList.splice(this.index,1);
},
allDel:function(){
this.rList = [];
},
sort:function(){
this.rList.sort((json1,json2)=>{
return json1.age - json2.age;
});
}
}
});
</script>
</body>
</html>
