DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<meta name="viewport" content=">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
style>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery-1.7.2.js">script>
<script src="lib/bootstrap.js">script>
<script src="vue.js">script>
<script>
window.onload=function(){
new Vue({
el:‘#box‘,
data:{
myData:[],
username:‘‘,
age:‘‘,
nowIndex:-100 //确定删除的index的初始值
},
methods:{
add:function(){
this.myData.push({
name:this.username, //myData=[name:‘‘,age:‘‘]
age:this.age
});
this.username=‘‘;
this.age=‘‘;
},
deleteMsg:function(n){
if(n==-2){
this.myData=[]; //给index一个状态，当是这个状态的时候全部删除，不是这个状态的时候index为0，1，2....
}else{
this.myData.splice(n,1); //一个一个删除的时候 ，splice（n,m.‘‘）从n开始删除m个元素,从n开始增加‘‘元素
}
}
}
});
};
script>
head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">用户名:label>
<input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">
div>
<div class="form-group">
<label for="age">年 龄:label>
<input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">
div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
<input type="reset" value="重置" class="btn btn-danger">
div>
form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h3 text-info">用户信息表caption>
<tr class="text-danger">
<th class="text-center">序号th>
<th class="text-center">名字th>
<th class="text-center">年龄th>
<th class="text-center">操作th>
tr>
<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-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除button>
td>
tr>
<tr v-show="myData.length!=0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer" >删除全部button>
td>
tr>
<tr v-show="myData.length==0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据....p>
td>
tr>
table>
<div role="dialog" class="modal fade bs-example-modal-sm" 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 data-dismiss="modal" class="btn btn-primary btn-sm">取消button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认button>
div>
div>
div>
div>
div>
body>
html>
京公网安备 11010802041100号