Vue购物车案例(全选,反选,加入,删除,加减,总价,数量)
1.购物车效果图2.代码展示<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style type="text/css">body{font-size: 16px;}table {width: 1200px;}
·
1.购物车效果图
2.代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body{
font-size: 16px;
}
table {
width: 1200px;
}
ul li{
list-style: none;
}
table th {
width: 100px;
}
table td {
width: 200px;
text-align: center;
}
.m {
width: 20px;
}
.shang{
width: 30%;
float: left;
text-align: center;
}
</style>
<body>
<div id="app">
<div id="div">
<h1>商品</h1>
<div class="shang" v-for="item in list">
<ul>
<li>{{item.name}}</li>
<li><img v-bind:src="item.imgsrc" width="80px" height="80px" /></li>
<li>{{item.dan}}</li>
<li><button @click="addg(item)" v-bind:disabled="item.amit==1">加入购物车</button></li>
</ul>
</div>
</div>
<!-------------------->
<table>
<tr>
<th>全选:<input type="checkbox" :checked='isCheckedAll' @click='chang'></th>
<th>序列号</th>
<th>商品</th>
<th>图片</th>
<th>数量</th>
<th>单价(元)</th>
<th>金额(元)</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in shopping">
<th><input type="checkbox" v-model="item.checked" /></th>
<th>{{index+1}}</th>
<th>{{item.name}}</th>
<th><img v-bind:src="item.imgsrc" width="80px" height="80px" /></th>
<th>
<button @click='jian(item)'>-</button>
<span></span>{{item.age}}
<button @click='jia(item)'>+</button>
<th>{{item.dan }}</th>
<th>{{(item.age*item.dan).toFixed(2) }}</th>
<th @click="del(index)">删除</th>
</tr>
<!--<h2>总价:{{getSum()}}</h2>-->
<tr>
<th>总价:<span v-text="getSum"></span></th>
<th>计件:{{jSut()}}</th>
</tr>
</table>
</div>
</body>
<script src="../js/vue.js">
</script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
list: [],
shopping: []
},
mounted() {
//fetch跟ajax一样,配合promise函数
fetch('tupian.json')
//把传过来的数据转为json对象
.then(respose => respose.json())
.then(reust => {
//reust.data 是json里面data,存到数组里面去
this.list = reust.data
})
},
methods: {
addg(list) {
let p = this.shopping.find(value => value.id == list.id)
list.amit--
console.log(p)
if(p) {
p.age++ //点击的时候总数量件-1
} else {
let {
name,
imgsrc,
checked,
dan,
id
} = list;
this.shopping.push({
checked,
id,
dan,
name,
imgsrc,
age: 1 // 点击加入购物车产品数量为1
})
}
},
//减
jia(index) {
index.age++
},
jian(index) {
if(index.age != 0) {
index.age--
}
},
//全选
chang() {
var flag = !this.isCheckedAll
this.shopping.forEach(item => item.checked = flag)
},
//选中删除
del(index) {
if(this.shopping[index].checked == true) {
this.shopping.splice(index, 1)
}
},
//计件
jSut() {
var sut = 0
for(var i in this.shopping) {
var item = this.shopping[i]
if(item.checked == true) {
sut += this.shopping[i].age
}
}
return sut
}
},
computed: {
//总价
getSum() {
var sum = 0
this.shopping.forEach(item => {
if(item.checked == true) {
sum += item.age * item.dan
}
})
return sum.toFixed(2);
},
//全选
isCheckedAll() {
return this.shopping.every(item => item.checked)
}
},
})
</script>
</html>
3.代码所用到数据
{
"data":[
{
"id":"001",
"name":"棉花糖",
"age": 1,
"dan":10.7,
"imgsrc":"../img/1.jpg",
"checked": false,
"amit":10
},
{
"id":"002",
"name":"烤串",
"age": 1,
"dan":1.78,
"imgsrc":"../img/1.jpg",
"checked": false,
"amit":10
},
{
"id":"003",
"name":"西瓜",
"age": 1,
"dan":10.78,
"imgsrc":"../img/1.jpg",
"checked": false,
"amit":10
}
]
}
更多推荐
已为社区贡献3条内容
所有评论(0)