首页 > 代码库 > Vue指令实战：结合bootstrap做一个用户信息输入表格
Vue指令实战：结合bootstrap做一个用户信息输入表格
结合前面的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="http://www.mamicode.com/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="http://www.mamicode.com/添加" class="btn btn-primary" @click="add">
<input type="reset" value="http://www.mamicode.com/重置" 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="http://www.mamicode.com/resources/js/jquery-1.9.1.min.js"></script>
<script src="http://www.mamicode.com/resources/js/bootstrap.min.js"></script>
<script src="http://www.mamicode.com/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=http://www.mamicode.com/[];>
本文出自 “dapengtalk” 博客，请务必保留此出处http://dapengtalk.blog.51cto.com/11549574/1864556
Vue指令实战：结合bootstrap做一个用户信息输入表格
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。