Vue实现简易留言板
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Vue实现简易留⾔板
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>Vue实现简易留⾔板</title>
6<link rel="stylesheet" type="text/css" href="bootstrap.css">
7<script src="jquery.js"></script>
8<script src="bootstrap.js"></script>
9<script src="vue.js"></script>
10<style type="text/css">
11 *{
12 margin:0;
13 padding:0;
14 }
15</style>
16</head>
17<body>
18<div class="container" id="box">
19<form role="form">
20<div class="form-group">
21<label for="username">⽤户名:</label>
22<input type="text" id="username" class="form-control" v-model="username" placeholder="请输⼊⽤户名">
23</div>
24<div class="form-group">
25<label for="age">年龄:</label>
26<input type="text" id="age" class="form-control" v-model="age" placeholder="请输⼊年龄">
27</div>
28<div class="form-group">
29<input type="button" value="添加" class="btn btn-primary" @click="add()">
30<input type="reset" value="重置" class="btn btn-danger">
31</div>
32</form>
33<hr>
34<table class="table table-bordered table-hover">
35<caption class="h2 text-info text-center">⽤户信息表</caption>
36<tr>
37<th class="text-center">序号</th>
38<th class="text-center">名字</th>
39<th class="text-center">年龄</th>
40<th class="text-center">操作</th>
41</tr>
42<tr class="text-center" v-for="(item,index) in myDate">
43<td>{{ index + 1 }}</td>
44<td>{{}}</td>
45<td>{{item.age}}</td>
46<td>
47<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex = index">删除</button> 48</td>
49</tr>
50<tr v-show="myDate.length!=0">
51<td colspan="4" class="text-right">
52<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2">删除全部</button> 53</td>
54</tr>
55<tr v-show="myDate.length==0">
56<td colspan="4" class="text-center text-muted">
57<p>暂⽆数据....</p>
58</td>
59</tr>
60</table>
61<!--模态框弹出框-->
62<div role="dialog" class="modal fade" id="layer">
63<div class="modal-dialog">
64<div class="modal-content">
65<div class="modal-header">
66<button type="button" class="close" data-dismiss="modal">
67<span>×</span>
68</button>
69<h4 class="modal-title" v-if="nowIndex!=-2">确认删除么？</h4>
70<h4 class="modal-title" v-if="nowIndex==-2">确认全部删除吗</h4>
71</div>
72<div class="modal-body text-right">
73<button data-dismiss="modal" class="btn btn-primary btn-sam">取消</button>
74<button data-dismiss="modal" class="btn btn-danger btn-sam" @click="deleteMsg(nowIndex)">确认</button>
75</div>
76</div>
77</div>
78</div>
79</div>
80<script>
81new Vue({
82 el:"#box",
83 data:{
84 myDate:[],
85 username:'',
86 age:'',
87 nowIndex:-999
88 },
89 methods:{
90 add:function(){
91this.myDate.push({
92 name:ername,
93 age:this.age
94 }),
ername="";
96this.age=""
97 },
98 deleteMsg:function(n){
99if(n==-2) {
100this.myDate=[];
101 }else{
102this.myDate.splice(n,1); 103 }
104
105 }
106 }
107
108 })
109</script>
110</body>
111</html>。