分享程序员开发的那些事...
更新时间：2022-09-30 23:00:56
结合前面的vue指令做了个小例子，用户在表单里面输入用户名和年龄，点击“添加”以后会保存到用户信息表里面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="resources/css/bootstrap.min.css"/>
<title></title>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="uName">用户名：</label>
<!--.form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;-->
<input type="text" id="uName" class="form-control" v-model="userName">
</div>
<div class="form-group">
<label for="age">年 龄：</label>
<input type="text" id="age" class="form-control" v-model="userAge">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" @click="add">
<input type="reset" value="重置" class="btn btn-success">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h2 text-center">用户信息表</caption>
<thead>
<tr class="text-info">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr class="text-center" v-for="item in myData">
<td>{{$index+1}}</td>
<td>`item`.`name`</td>
<td>`item`.`age`</td>
<td><button class="btn btn-info btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=$index">删除</button></td>
</tr>
<tr class="text-right" v-show="myData.length!=0">
<td colspan="4">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2">全部删除</button>
</td>
</tr>
<tr class="text-center text-muted" v-show="myData.length==0">
<td colspan="4"><p>暂无数据……</p></td>
</tr>
</tbody>
</table>
<!--模态框 弹出框-->
<div class="modal fade" role="dialog" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">确认删除吗？</h4>
</div>
<div class="modal-body text-right">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" @click="remove(nowIndex)">确认</button>
</div>
</div>
</div>
</div>
</div>
<script src="resources/js/jquery-1.9.1.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/vue.js"></script>
<script>
var vm = new Vue({
el:'#box',
data:{
myData:[],
userName:'',
userAge:'',
nowIndex:'-100' //需要特别注意nowIndex的用法
},
methods:{
add:function(){
this.myData.push({
name: this.userName,
age: this.userAge
});
this.userName='';
this.userAge='';
},
remove:function(n){
if(n==-2){//如果点击的是“全部删除”，则清空整个数组
this.myData=[];
}else{//如果点击的是单行内的“删除”，则删除该行即可
this.myData.splice(n,1)
}
}
}
})
</script>
</body>
</html>
|
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1864556
