1.用vue以对象的形式添加删除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
h1{
text-align: center;
}
p{
margin-top: 20px;
text-align: center;
font-weight: 600;
}
input{
margin-top: 20px;
width: 1000px;
height: 35px;
margin-left: 20%;
border: 1.5px solid #cccccc;
color: #cccccc;
font-size: 16px;
padding-left: 10px;
}
.btn{
width: 150px;
height: 50px;
margin: 0 auto;
margin-top: 20px;
}
.btn button{
width: 50px;
height: 35px;
margin-left: 15px;
margin-top: 30px;
border-radius: 5%;
border: 0px;
color: white;
}
.btn1{
background: #337ab7;
}
.btn2{
background: #5cb85c;
}
.btn2 a{
color: white;
list-style: none;
text-decoration: none
}
#itany td{
width: 200px;
height: 30px;
border: 1px solid #ccc;
text-align: center;
}
#itany{
margin-left: 20%;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="in">
<h1>添加用户</h1>
<p>姓名</p>
<input type="" placeholder="请输入姓名" v-model="people1.name">
<p>年龄</p>
<input type="" placeholder="请输入年龄" v-model="people1.age">
<p>邮箱</p>
<input type="" placeholder="请输入邮箱" v-model="people1.emil">
<div class="btn">
<button class="btn1" v-on:click="atl">添加</button>
<button class="btn2"><a href="">重置</a></button>
</div>
<table id="itany" width="1000px" cellspacing=0>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>邮箱</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in people">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.age}}</td>
<td>{{val.emil}}</td>
<td><button v-on:click="remov(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".in",
data:{
people:[
{
name:"tom",
age:18,
emil:"tom@126.com"
},
{
name:"iack",
age:19,
emil:"jack@126.com"
},
{
name:"amy",
age:20,
emil:"amy@126.com"
},
],
people1:{name:"",age:"",emil:""}
},
methods:{
atl:function(){
this.people.push(this.people1)
},
remov:function(a){
this.people.splice(a,1)
},
}
})
</script>
</body>
</html>
2.购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.in td{
width: 300px;
height: 40px;
border: 1px solid #ccc;
text-align: center;
}
.in{
margin-left: 3%;
margin-top: 100px;
}
.in p{
width: 1510px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="in">
<table cellspacing=0>
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
</thead>
<tbody>
<tr v-for="(val,index) in fruit">
<td>{{index+1}}</td>
<td>{{val.name}}</td>
<td>{{val.priec}}</td>
<td><button v-on:click="alt(index)"> + </button>{{val.num}}<button v-on:click="alt1(index)"> - </button></td>
<td>{{val.add}}</td>
</tr>
</tbody>
</table>
<p>总计：{{total}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".in",
data:{
fruit:[
{name:"香蕉",priec:1,num:0,add:0},
{name:"苹果",priec:2,num:0,add:0},
{name:"鸭梨",priec:3,num:0,add:0},
],
total:0
},
methods:{
alt:function(index){
this.fruit[index].num++
this.fruit[index].add=Number(this.fruit[index].num)*Number(this.fruit[index].priec)
this.total+=this.fruit[index].priec
} ,
alt1:function(index){
if(this.fruit[index].num>1){
this.fruit[index].num--
this.fruit[index].add=Number(this.fruit[index].num)*Number(this.fruit[index].priec)
this.total-=this.fruit[index].priec
}
}
}
})
</script>
</body>
</html>
网友评论