添加用户：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
text-align: center;
margin-top: 40px;
}
*{
padding: 0;
margin: 0;
}
.header{
width: 900px;
margin: 0 auto;
}
h1{
font-weight: 400;
text-align: center;
}
input{
width: 900px;
height: 40px;
border-radius: 5px;
border: 1px #ccc solid;
}
.header p{
margin-top: 20px;
}
.header button{
width: 70px;
height: 40px;
margin-top: 20px;
border-radius: 5px;
}
table{
width: 900px;
}
</style>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="header">
<h1>添加用户</h1>
<p>姓名:</p>
<input type="text" v-model="ta.name"/>
<p>年龄:</p>
<input type="text" v-model="ta.age"/>
<p>邮箱：</p>
<input type="text" v-model="ta.an"/>
<button style="background:#337ab7 ;"v-on:click="art">添加</button>
<button style="background:#5cb85c ;">重置</button>
<table border="" cellspacing="0" cellpadding="">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>方式</th>
<th>名称</th>
</tr>
<tr v-for="(v,index) in arrs">
<td>{{index+1}}</td>
<td>{{v.name}}</td>
<td>{{v.age}}</td>
<td>{{v.an}}</td>
<td><button v-on:click="ar(index)">删除</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:'.header',
data:{
ta:{
num:'',
name:'',
age:'',
an:'',
},
arrs:[
{num:1,name:"yang",age:18,an:'yang.com'},
{num:2,name:"zhang",age:19,an:'yang.com'},
{num:3,name:"wang",age:20,an:'yang.com'}
],
},
methods:{
art:function(){
this.arrs.push(this.ta),
this.ta={}
},
ar:function(ind){
this.arrs.splice(ind,1)
}
}
})
</script>
</body>
</html>
购物车：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
table{
width:900px;
margin:50px auto;
text-align: center;
}
</style>
<body>
<div id="app">
<table border="" cellspacing="0" cellpadding="">
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr v-for="(v,index) in arrs">
<td>{{index+1}}</td>
<td>{{v.name}}</td>
<td> {{v.age}}</td>
<td> <button v-on:click="jia(index)">+</button>{{v.an}}<button v-on:click="jian(index)">-</button></td>
<td>{{v.age*v.an}}</td>
</tr>
</table>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
arrs:[
{num:1,name:"苹果",age:1,an:'4'},
{num:2,name:"香蕉",age:2,an:'5'},
{num:3,name:"梨",age:3,an:'6'}
],
arr:['h'],
},
methods:{
jia:function(index){
this.arrs[index].an++;
},
jian:function(index){
this.arrs[index].an--;
},
}
})
</script>
</body>
</html>
网友评论