一、简单的购物车案例
body部分：
<div class="container">
<table class="table table-bordered text-center">
<thead>
<tr>
<th class="text-center">编号</th>
<th class="text-center">名称</th>
<th class="text-center">单价</th>
<th class="text-center">数量</th>
<th class="text-center">小计</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arr">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
<td>
<button @click="add(index)">-</button>
<input type="text" v-model="value.num" style="width:30px">
<button @click="alt(index)">+</button>
</td>
<td>{{value.price*value.num}}</td>
</tr>
<tr>
<td colspan="5">总价:{{arrs}}</td>
</tr>
</tbody>
</table>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:".container",
data:{
arr:[
{name:'香蕉',price:1,num:1,total:1},
{name:'苹果',price:2,num:1,total:2},
{name:'鸭梨',price:3,num:1,total:3}
],
arrs:6
},
methods:{
alt:function(index){
//1.数量加
this.arr[index].num++;
// 2.小计加
this.arr[index].total=this.arr[index].price*this.arr[index].num
this.getTotal()
},
add:function(index){
if(this.arr[index].num>1){
//1. 数量减
this.arr[index].num--;
// 2.小计减
this.arr[index].total=this.arr[index].price*this.arr[index].num
}
this.getTotal()
},
getTotal:function(){
//总价
for(var i=0,sum=0;i<this.arr.length;i++){
sum+=this.arr[i].total
}
this.arrs=sum;
}
}
})
</script>
效果图：
购物车.png
二、选项卡
body部分：
<div id="itany">
<ul class="list">
<li v-for='(value,index) in arr' @click='chg(index)'>{{value.name}}</li>
</ul>
<ul class="content">
<li v-for="(value,index) in arr" v-show="value.flag">{{value.cont}}</li>
</ul>
</div>
js部分：
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#itany',
data:{
arr:[
{name:'选项卡一',cont:'这是选项卡一',flag:true},
{name:'选项卡二',cont:'这是选项卡二',flag:false},
{name:'选项卡三',cont:'这是选项卡三',flag:false}
]
},
methods:{
chg:function(ind){
for(var i=0;i<this.arr.length;i++){
this.arr[i].flag=false;
}
this.arr[ind].flag=true;
}
}
})
</script>
css部分：
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
a{
text-decoration:none;
color:#333;
}
li{
list-style: none;
}
#itany{
width:450px;
margin: 100px auto;
}
.list{
overflow: hidden;
width:450px;
}
.list>li{
float:left;
text-align: center;
font-size:30px;
width:150px;
background:red;
}
.list>li:nth-child(2){
background:cyan;
}
.list>li:nth-child(3){
background:yellow;
}
.content>li{
width:450px;
height: 150px;
line-height: 150px;
text-align: center;
border:1px solid #000;
background:red;
}
.content>li:nth-child(2){
background:cyan;
}
.content>li:nth-child(3){
background:yellow;
}
</style>
效果图：
选项卡.png
