vue的京东购物车/bootstrp
作者：互联网
<body>
<div id="app">
<!-- 搜索input -->
<input type="text" v-model="searchtext">
<!-- 下拉框 -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">{{pleaseselect}}</button>
<ul class="dropdown-menu">
<li v-for="(item,index) in goodslist" @click="selectcontent(index)"><a href="#">{{item.goods_brand}}</a>
</li>
</ul>
</div>
<!-- 搜索button -->
<button type="button" class="btn btn-danger" @click="search">搜索</button>
<!-- 表格 -->
<table class="table table-hover">
<thead>
<tr>
<th><input type="checkbox" :checked="isCheckAll" @click="checkall"> 全选</th>
<th>照片</th>
<th>简介</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in goodslist" :key="index">
<th scope="row"><input type="checkbox" :checked="item.isChecked" @click="tocheck(index)">
{{index+1}} </th>
<th><img class="img-rounded" style="width: 100px;height: 100px;" :src="item.goods_small_logo"
alt=""></th>
<th>{{item.goods_name}}</th>
<th>￥:{{item.goods_price}}.00</th>
<th>
<button type="button" @click="add(index,-1)" class="glyphicon glyphicon-minus"
v-if="item.goods_number<=1" disabled="disabled"></button>
<button type="button" @click="add(index,-1)" class="glyphicon glyphicon-minus" v-else></button>
{{item.goods_number}}
<button type="button" @click="add(index,1)" class="glyphicon glyphicon-plus"></button>
</th>
<th>￥{{item.goods_price*item.goods_number}}</th>
<th><span @click="remove(index)" class="glyphicon glyphicon-trash"></span></th>
</tr>
</tbody>
</table>
<p>已选{{num}}商品；总计￥{{totalprice}}</p>
<!-- 添加表单 -->
<form class="form-inline">
<div class="form-group">
<label for="exampleInputEmail2">商品简介</label>
<input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_name"
placeholder="商品简介">
</div>
<div class="form-group">
<label for="exampleInputEmail2">价格</label>
<input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_price"
placeholder="价格">
</div>
<div class="form-group">
<label for="exampleInputEmail2">数量</label>
<input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_number"
placeholder="数量">
</div>
<div class="form-group">
<label for="exampleInputEmail2">照片链接</label>
<input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_small_logo"
placeholder="照片链接">
</div>
<div class="form-group">
<label for="exampleInputEmail2">品牌</label>
<input type="text" class="form-control" id="exampleInputEmail2" v-model="addfrom.goods_brand"
placeholder="品牌">
</div>
<button type="button" @click="addshop" class="btn btn-default">添加</button>
</form>
<br /><br /><br />
</div>
<script>
const vue = new Vue({
el: '#app',
data: {
//商品列表
goodslist: [{
"goods_id": 57332,
"cat_id": 998,
"goods_name": "400毫升 海鲜食品冷藏冰包 注水冰袋医用冰袋户外冷藏保鲜熟食冷藏反复使用（10个装）",
"goods_price": 14,
"goods_number": 1,
"goods_weight": 100,
"goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_800x800.jpg",
"goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_400x400.jpg",
"add_time": 1516662792,
"upd_time": 1516662792,
"hot_mumber": 0,
"isChecked": true,
"goods_brand": '海鲜'
}, {
"goods_id": 57444,
"cat_id": 9,
"goods_name": "创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）",
"goods_price": 1899,
"goods_number": 1,
"goods_weight": 100,
"goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg",
"goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_400x400.jpg",
"add_time": 1516663280,
"upd_time": 1516663280,
"hot_mumber": 0,
"isChecked": false,
"goods_brand": '海尔'
}, {
"goods_id": 57433,
"cat_id": 9,
"goods_name": "创维(skyworth) 55V8E 55英寸 4K超高清HDR纤薄全金属机身智能酷开网络液晶电视",
"goods_price": 3299,
"goods_number": 1,
"goods_weight": 100,
"goods_big_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_800x800.jpg",
"goods_small_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_400x400.jpg",
"add_time": 1516663242,
"upd_time": 1516663242,
"hot_mumber": 0,
"isChecked": false,
"goods_brand": '华为'
}, {
"goods_id": 57442,
"cat_id": 9,
"goods_name": "创维彩电40G6A",
"goods_price": 2999,
"goods_number": 1,
"goods_weight": 100,
"goods_big_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_800x800.jpg",
"goods_small_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg",
"add_time": 1516663277,
"upd_time": 1516663277,
"hot_mumber": 0,
"isChecked": false,
"goods_brand": 'TCL'
}, {
"goods_id": 57441,
"cat_id": 9,
"goods_name": "创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 65G7 (65英寸)",
"goods_price": 9699,
"goods_number": 1,
"goods_weight": 100,
"goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_800x800.jpg",
"goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_400x400.jpg",
"add_time": 1516663273,
"upd_time": 1516663273,
"hot_mumber": 0,
"isChecked": false,
"goods_brand": 'HDR'
}],
isCheckAll: false,
searchtext: '',
pleaseselect: "请选择",
//添加对象
addfrom: {
goods_number: 0,
goods_name: '',
goods_price: 0,
goods_small_logo: '',
isChecked: false,
goods_brand: ''
}
},
methods: {
//单选
tocheck(index) {
this.goodslist[index].isChecked = !this.goodslist[index].isChecked
//全选
for (let item of this.goodslist) {
if (item.isChecked == false) {
this.isCheckAll = false
return;
} else {
this.isCheckAll = true
}
}
},
//全选
checkall() {
this.isCheckAll = !this.isCheckAll
//console.log( this.isCheckAll)
if (this.isCheckAll == true) {
this.goodslist.forEach(v => v.isChecked = true)
}
if (this.isCheckAll == false) {
this.goodslist.forEach(v => v.isChecked = false)
}
},
//添加数量
add(index, m) {
this.goodslist[index].goods_number = m + this.goodslist[index].goods_number
},
//删除
remove(index) {
//console.log(index)
this.goodslist.splice(index, 1)
},
//search搜索
search() {
let m = []
if (this.searchtext != "" && this.pleaseselect != "请选择") {
this.goodslist.forEach(v => {
if (v.goods_name.match(this.searchtext) != null && v.goods_brand.match(this
.pleaseselect) != null) {
m.push(v)
}
})
} else {
if (this.searchtext != "") {
this.goodslist.forEach(v => {
if (v.goods_name.match(this.searchtext) != null) {
m.push(v)
}
})
} else if (this.pleaseselect != "请选择") {
this.goodslist.forEach(v => {
if (v.goods_brand.match(this.pleaseselect) != null) {
m.push(v)
}
})
}
}
this.goodslist = m;
console.log(this.goodslist)
},
//selectcontent选择的内容
selectcontent(index) {
this.pleaseselect = this.goodslist[index].goods_brand
},
//添加商品
addshop() {
this.goodslist.push(this.addfrom)
this.addfrom = {
goods_number: 0,
goods_name: '',
goods_price: 0,
goods_small_logo: '',
isChecked: false,
goods_brand: ''
}
console.log(this.addfrom)
console.log(this.goodslist)
}
},
computed: {
//被选的数量
num() {
let n = 0;
this.goodslist.forEach(v => v.isChecked === true ? n++ : n)
return n
},
//总价
totalprice() {
let n = 0;
this.goodslist.forEach(v => v.isChecked === true ? n = n + v.goods_number * v.goods_price :
n)
return n
}
}
})
</script>
</body>
</html>
标签：index,goods,vue,number,购物车,isChecked,goodslist,logo,bootstrp 来源： https://www.cnblogs.com/shuicai/p/15041572.html