vue的 简单表格例子 v-if v-show v-model
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../bootstrap.css">
<title>Document</title>
<script src="jquery.min.js"></script>
<script src="../bootstrap.js"></script>
<script src="../vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#box",
data:{
mydata:[
// {name:"航三",age:"12"}
],
username:"",
userage:"",
nowIndex:-100
},
methods:{
add:function(){
this.mydata.push({
name:this.username,
age:this.userage
});
this.username="";
this.userage="";
},
deleteMsg:function(n){
if(n==-2){
this.mydata=[]
}else{
this.mydata.splice(n,1)
}
}
}
});
};
</script>
</head>
<body>
<div class="container" id="box">
<form>
<div class="form-group">
<label>用户名：</label>
<input type="text" class="form-control" placeholder="请输入用户名" v-model="username">
</div>
<div class="form-group">
<label>年龄：</label>
<input type="text" class="form-control" placeholder="请输入年龄" v-model="userage">
</div>
<button type="button" class="btn btn-info" v-on:click="add()">添加</button>
<button type="reset" class="btn btn-danger">重置</button>
<div class="table-responsive">
<table class="table-bordered table">
<tr>
<th>序号</th>
<th>名字</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(x,index) in mydata">
<td>{{index+1}}</td>
<td>{{x.name}}</td>
<td>{{x.age}}</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#myclick" v-on:click="nowIndex=index">删除</button></td>
</tr>
<tr v-show="mydata.length!=0">
<td colspan="4" class="text-right"><button type="button" class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#myclick">删除全部</button></td>
</tr>
<tr v-show="mydata.length==0">
<td colspan="4" class="text-center"><p>暂无数据。。。</p></td>
</tr>
</table>
</div>
</form>
<!-- 模态框 -->
<div id="myclick" role="dialog" class="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" v-if="nowIndex!=-2">是否确定删除</h4>
<h4 class="modal-title" v-else>是否确定删除全部</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" v-on:click="deleteMsg(nowIndex)" data-dismiss="modal">确认</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
标签：username,function,vue,name,show,mydata,age,userage,model 来源： https://www.cnblogs.com/mm152534/p/10395886.html