Vue笔记 添加用户，选项卡，购物车加减
2018-09-17 本文已影响0人
张鑫冲
购物车加减效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class='container'>
<table class='table table-bordered text-center'>
<thead>
<tr>
<th>编号</th>
<th>品名</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in list">
<td>{{index+1}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
<td>
<button @click='add(index)'>+</button>
<span>{{value.count}}</span>
<button @click='redu(index)'>-</button>
</td>
<td>{{value.sub}}</td>
</tr>
<tr>
<td colspan="5">总价：￥{{sum}}</td>
</tr>
</tbody>
</table>
</div>
<script src="../../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
list:[
{pname:'apple',price:3,count:2,sub:6},
{pname:'pear',price:4,count:3,sub:12},
{pname:'banana',price:5,count:4,sub:20}
],
sum:0
},
methods:{
add:function(ind){
//数量
this.list[ind].count++;
//改变小计
this.list[ind].sub=this.list[ind].count*this.list[ind].price;
this.total();
},
redu:function(ind){
//数量
if(this.list[ind].count>1){
this.list[ind].count--;
}
//小计
this.list[ind].sub=this.list[ind].count*this.list[ind].price;
this.total();
},
total:function(){
for(var i=0,tota=0;i<this.list.length;i++){
tota+=this.list[i].sub
}
this.sum=tota
}
}
})
</script>
</body>
</html>
选项卡效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<ul>
<li v-for='(value,index) in card' @click='chg(index)'>{{value.title}}</li>
</ul>
<ul>
<li v-for='(value,index) in card' v-show='value.flag'>{{value.content}}</li>
</ul>
</div>
<script src="../../js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
card:[
{title:'选项卡1',content:'11111111111111111',flag:true},
{title:'选项卡2',content:'22222222222222222',flag:false},
{title:'选项卡3',content:'33333333333333333',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.card.length;i++){
this.card[i].flag=false;
}
this.card[ind].flag=true;
}
}
})
</script>
</body>
</html>
添加用户效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<p>姓名</p>
<input type="text" v-model="arrs.name"/>
<p>年龄</p>
<input type="text" v-model="arrs.name1"/>
<p>邮箱</p>
<input type="text" v-model="arrs.name2"/>
<div>
<button v-on:click="add">添加</button>
<button v-on:click="app(index)">删除</button>
</div>
<table border="1" cellspacing="0" cellpadding="" style="width: 500px;">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
<tr v-for="(value,index) in arr">
<td>{{value.name}}</td>
<td>{{value.name1}}</td>
<td>{{value.name2}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#box',
data:{
arr:[
{name:'张',name1:'18',name2:'1054890634@qq.com'}
],
arrs:{}
},
methods:{
add:function(){
this.arr.push(this.arrs)
},
app:function(ind){
this.arr.splice(ind,1)
}
}
})
</script>
</body>
</html>
