<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<title>Title</title>
<link rel="stylesheet" href="boots/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="boots/bootstrap-3.3.7-dist/jquery-1.11.3.min.js" type="text/javascript " charset="utf-8" ></script>
<script src="boots/bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript " charset="utf-8" ></script>
<style>
input{
width: 800px;
height: 30px;
}
h3{
padding-left: 350px;
}
</style>
</head>
<body>
<div id="app">
<h4>姓名</h4>
<input type="text" v-model="wang">
<h4>年龄</h4>
<input type="text" v-model="zhang">
<h4>邮箱</h4>
<input type="text" v-model="yang">
<p></p>
<button type="button" class="btn btn-primary" v-on:click="alk">添加</button>
<button type="button" class="btn btn-success" >删除</button>
<h3>用户列表</h3>
<table border="" cellspacing="0" width="800px">
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>邮箱</td>
<td>操作</td>
</tr>
<tr v-for="(l,index) in msg">
<td >{{l.num}}</td>
<td>{{l.name}}</td>
<td>{{l.price}}</td>
<td>{{l.you}}</td>
<td><button v-on:click="alk1(index)">删除</button></td>
</tr>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
msg:[
{
num:"1",
name:"杨梦娇",
price:"19",
you:"@123456",
},
{
num:"2",
name:"张春华",
price:"19",
you:"@158745",
},
{
num:"3",
name:"王诺岚",
price:"19",
you:"@155453",
}
],
wang:'',
zhang:'',
yang:''
},
methods:{
alk:function(){
this.msg.push({num:this.msg.length+1,name:this.wang,price:this.zhang,you:this.yang
})
},
alk1:function(ind){
this.msg.splice(ind,1)
}
}
})
</script>
</body>
</html>
网友评论