表单动态操作数据交互
使用 Vue和 BootStrap 实现下面的功能:
默认情况下:
- 姓名和学号框全为空的时候,提交按钮不能点击
- 姓名和学号框全有一项不为空的时候,重置按钮才可以点击
- 表格中默认显示暂无数据,添加数据之后暂无数据隐藏
- 点击删除按钮,弹出弹框
- 点击弹框中的删除按钮后才会真正删除数据
先搭建一个基本的页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态操作数据</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.input-message, .show-messge {
margin: 10px 50px;
}
.show-messge {
margin-top : 30px;
}
#title {
font-size : 24px;
text-align: center;
color : #58a;
margin-bottom: 10px;
}
#tip {
text-align: center;
font-size: 20px;
color: cornflowerblue;
}
</style>
</head>
<body>
<div id="app">
<div class="input-message">
<form>
<div class="form-group">
<label for="exampleInputEmail1">姓名</label>
<input v-model = 'name' type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="exampleInputPassword1">学号</label>
<input v-model = 'number' type="Number" class="form-control" id="exampleInputPassword1" placeholder="请输入学号">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 是否住校
</label>
</div>
<input type="button" class="btn btn-primary" value="提交" >
<input type="button" class="btn btn-danger" value = '重置'>
</form>
</div>
<div class="show-messge">
<div id="title">学员信息表</div>
<table class="table table-bordered ">
<tr>
<td>序号</td>
<td>姓名</td>
<td>学号</td>
<td>是否住校</td>
<td >操作</td>
</tr>
<tr id="tip">
<td colspan = '5'>暂无数据...</td>
<tr>
<table>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
确定删除吗？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" @click = 'del'>删除</button>
<button type="button" class="btn btn-success" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
- 使用v-model实现数据的双向绑定,姓名框,学号框和是否住校中的内容要添加到下面的表格中,所以需要双向绑定.
<div class="form-group">
<label for="exampleInputEmail1">姓名</label>
<input v-model = 'name' type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="exampleInputPassword1">学号</label>
<input v-model = 'number' type="Number" class="form-control" id="exampleInputPassword1" placeholder="请输入学号">
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model = 'isChecked'> 是否住校
</label>
</div>
//在data中初始化两个变量,用来存储姓名和学号
data : {
messageList : [],
name : '',
number : '',
isChecked : false,
},
- 我们需要将这些数据渲染到页面中,所以把这些数据存在一个数组中,循环这个数据来渲染数据.
- 点击提交按钮的时候就要向数组中push新的信息,所以还要给提交按钮绑定一个add函数.
- 点击重置按钮的时候,输入框中的内容清空
<tr v-for = '(item,index) in messageList' :key = 'index'>
<td>{
{
index+1}}</td>
<td>{
{
item.name}}</td>
<td>{
{
item.number}}</td>
<td>{
{
item.isChecked}}</td>
<td><input type="button" class="btn btn-danger" value = '删除' data-toggle="modal" data-target="#exampleModal"></td>
</tr>
//提交按钮绑定事件
<input type="button" class="btn btn-primary" value="提交" :disabled = '!name || !number' @click = 'add'>
//重置按钮绑定事件
<input type="button" class="btn btn-danger" value = '重置' :disabled = '!name && !number' @click = 'reset'>
//methods
//添加数据
add(){
this.messageList.push({
name : this.name,number : this.number,isChecked : this.isChecked})
},
//重置
reset() {
this.name = ' ';
this.number = ' ';
},
- 当我们添加数据之后
暂无数据...这一行需要隐藏
- 首先想到的是通过v-show来控制显示与隐藏
- v-show的判断条件是什么呢?
- 当我们添加数据之后,数据
messageList的长度就不为0 - 所以数组长度为0 ,显示
- 数组长度不为0 ,隐藏
- 当我们添加数据之后,数据
//长度为0显示,所以需要取一次反
<tr id="tip" v-show = '!messageList.length'>
<td colspan = '5'>暂无数据...</td>
</tr>
- 但是现在还有一个问题是,我们添加的是否住校是一个
布尔值,而不是我们想要的住校或者不住校,这个时候我们就需要用到filters
- 选中的时候渲染住校
- 不选中的时候渲染不住校
<td>{
{
item.isChecked | foo}}</td>
//filters
filters : {
foo : function(value) {
if(value) {
return '住校';
}else {
return '不住校'
}
}
}
- 删除功能的实现
-
点击表格中的删除并不是真正的删除,点击这个删除只会弹出弹框
-
点击弹框中的删除才是真正的删除数据
-
但是我们表格中的数据就没用了吗???当然不可能,
-
想想我们点击弹框中的删除的时候,怎么知道删除数据呢,我们不知道下标是多少啊
-
这个时候就需要用到表格中的删除按钮了,点击表格中的删除按钮的时候就要保存当前项的下标
- 在data中初始化一个index,默认为0
- 点击表格中的删除按钮时修改index的值为当前点击项的下标
-
点击弹窗中的删除按钮时利用splice删除选中的项
//表格中的删除按钮
<td><input type="button" class="btn btn-danger" value = '删除' @click = 'saveIndex(index)' data-toggle="modal" data-target="#exampleModal"></td>
//弹窗中的删除按钮
<button type="button" class="btn btn-danger" @click = 'del'>删除</button>
//在data中初始化index,默认值为1
data: {
index : 1,
}
//表格中删除按钮的事件
saveIndex(index) {
//保存下标
this.index = index;
},
// 弹窗中的按钮
del() {
//删除
this.messageList.splice(this.index,1);
}
- 按钮的可点击
- 姓名和学号框全为空的时候,提交按钮不能点击
- 姓名和学号框全有一项不为空的时候,重置按钮才可以点击
<input type="button" class="btn btn-primary" value="提交" :disabled = '!name || !number' @click = 'add'>
<input type="button" class="btn btn-danger" value = '重置' :disabled = '!name && !number' @click = 'reset'>
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态操作数据</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.input-message, .show-messge {
margin: 10px 50px;
}
.show-messge {
margin-top : 30px;
}
#title {
font-size : 24px;
text-align: center;
color : #58a;
margin-bottom: 10px;
}
#tip {
text-align: center;
font-size: 20px;
color: cornflowerblue;
}
</style>
</head>
<body>
<div id="app">
<div class="input-message">
<form>
<div class="form-group">
<label for="exampleInputEmail1">姓名</label>
<input v-model = 'name' type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="exampleInputPassword1">学号</label>
<input v-model = 'number' type="Number" class="form-control" id="exampleInputPassword1" placeholder="请输入学号">
</div>
<div class="checkbox">
<label>
<input type="checkbox" v-model = 'isChecked'> 是否住校
</label>
</div>
<input type="button" class="btn btn-primary" value="提交" :disabled = '!name || !number' @click = 'add'>
<input type="button" class="btn btn-danger" value = '重置' :disabled = '!name && !number' @click = 'reset'>
</form>
</div>
<div class="show-messge">
<div id="title">学员信息表</div>
<table class="table table-bordered ">
<tr>
<td>序号</td>
<td>姓名</td>
<td>学号</td>
<td>是否住校</td>
<td >操作</td>
</tr>
<tr id="tip" v-show = '!messageList.length'>
<td colspan = '5'>暂无数据...</td>
</tr>
<tr v-for = '(item,index) in messageList' :key = 'index'>
<td>{
{
index+1}}</td>
<td>{
{
item.name}}</td>
<td>{
{
item.number}}</td>
<td>{
{
item.isChecked | foo}}</td>
<td><input type="button" class="btn btn-danger" value = '删除' @click = 'saveIndex(index)' data-toggle="modal" data-target="#exampleModal"></td>
</tr>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
确定删除吗？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" @click = 'del'>删除</button>
<button type="button" class="btn btn-success" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
<script>
const app = new Vue({
el : '#app',
data : {
messageList : [],
name : '',
number : '',
isChecked : false,
index : 1,
},
methods : {
reset() {
this.name = ' ';
this.number = ' ';
},
add() {
this.messageList.push({
name : this.name,number : this.number,isChecked : this.isChecked})
},
saveIndex(index) {
this.index = index;
console.log(this.index);
},
del() {
this.messageList.splice(this.index,1);
}
},
filters : {
foo : function(value) {
if(value) {
return '住校';
}else {
return '不住校'
}
}
}
})
</script>
</body>
</html>