结合前面的vue指令做了个小例子，用户在表单里面输入用户名和年龄，点击“添加”以后会保存到用户信息表里面
<!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>
时间： 2024-10-25 04:09:25