涉及知识点:指令:v-for v-on(@) v-bind(:) {{ }}
vue的属性:el,data,methods,computed
设计到的知识点并不是很多,大家可以看一下
准备代---bootstrap.css和vue.js路径要正确
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>组件综合小案例</title> <link href="bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet"> <script src="./vue.js"></script> </head> <body> <div id="app" class="container"> <br> <header> <p class="text-center bg-primary h1">我的商品</p> </header> <main> <table class="table table-bordered table-hover"> <tr > <td> <input type="checkbox" ></td> <td> <img src= width=60 ></td> <td align="center" class="h4 text-danger" style="vertical-align: middle;" >单价:¥</td> <td style="vertical-align: middle;" align="center"> <button class="btn btn-primary btn-xs">-</button> <input type="text" > <button class="btn btn-primary btn-xs">+</button> </td> <td align="center" style="vertical-align: middle;"> <button type="button" class="btn btn-danger h3"> × </button> </td> </tr> </table> </main> <footer> <p class="text-right bg-primary">总价: <button type="button" class="btn btn-danger btn-lg">结算</button> </p> </footer> <script> var vm=new Vue({ el:"#app", data:{ lists:[ {id:1,check:true,imgUrl:"./imgs/1.png",name:"厨具用刀",price:188,num:1}, {id:2,check:true,imgUrl:"./imgs/2.png",name:"男士皮带",price:299,num:1}, {id:3,check:true,imgUrl:"./imgs/3.png",name:"男士钱包",price:280,num:1}, {id:4,check:true,imgUrl:"./imgs/4.png",name:"女士斜挎包1",price:150,num:1}, {id:5,check:true,imgUrl:"./imgs/5.png",name:"女士斜挎包2",price:200,num:1}, {id:6,check:true,imgUrl:"./imgs/6.png",name:"儿童小玩具",price:288,num:1}, ] } }) </script> </body> </html>
开始使用数据渲染
完成按钮相关的功能
vue当中的相关操作
所有的代码
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>组件综合小案例</title>
<link href="bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
<script src="./vue.js"></script>
</head>
<body>
<div id="app" class="container"> <br>
<header>
<p class="text-center bg-primary h1">我的商品</p>
</header>
<main>
<table class="table table-bordered table-hover">
<tr v-for="item in lists" :key="item.id" >
<td> <input type="checkbox" v-model="item.check" ></td>
<td> <img :src="item.imgUrl" alt="" width="60" >{{item.name}}</td>
<td align="center" class="h4 text-danger" style="vertical-align: middle;" >单价:¥{{item.price*item.num}}</td>
<td style="vertical-align: middle;" align="center">
<!-- 点击之后减少 数量减少 -->
<button class="btn btn-primary btn-xs" @click="changePrice(item.id)" >-</button>
<input type="text" v-model="item.num">
<!-- 点击之后再增加 数量增加-->
<button class="btn btn-primary btn-xs" @click="item.num++">+</button>
</td>
<td align="center" style="vertical-align: middle;">
<!-- 点击之后删除这个商品 -->
<button type="button" class="btn btn-danger h3" @click="del(item.id)"> × </button>
</td>
</tr>
</table>
</main>
<footer>
<p class="text-right bg-primary">总价:{{total}}
<button type="button" class="btn btn-danger btn-lg" @click="totalPrice">结算</button>
</p>
</footer>
<script>
var vm=new Vue({
el:"#app",
data:{
total:0,
lists:[
{id:1,check:true,imgUrl:"./imgs/1.png",name:"厨具用刀",price:188,num:1},
{id:2,check:true,imgUrl:"./imgs/2.png",name:"男士皮带",price:299,num:1},
{id:3,check:true,imgUrl:"./imgs/3.png",name:"男士钱包",price:280,num:1},
{id:4,check:true,imgUrl:"./imgs/4.png",name:"女士斜挎包1",price:150,num:1},
{id:5,check:true,imgUrl:"./imgs/5.png",name:"女士斜挎包2",price:200,num:1},
{id:6,check:true,imgUrl:"./imgs/6.png",name:"儿童小玩具",price:288,num:1},
]
},
methods:{
// 商品的数量点击一次减少一次,如果剩下0次之后不得再减
changePrice(id){
var goods= this.lists.filter((goods)=> {
return id==goods.id
})
return goods[0].num>0? goods[0].num-- : goods[0].num=0
},
// 删除当前商品
del(id){
this.lists= this.lists.filter((goods)=> {
return id!=goods.id
})
},
},
computed:{
totalPrice(){
//每次点击初始化一下total的值
this.total=0;
for(var i=0;i<this.lists.length;i++){
if(this.lists[i].check==false){
this.lists[i].num =0;
}
this.total += (this.lists[i].price*this.lists[i].num)
}
return this.total
}
}
})
</script>
</body>
</html>