結合前面的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="h3 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>
<h5 class="modal-title">確認刪除嗎？</h5>
</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>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
