vue实现商城购物车功能实现商城购物车功能
本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下
首先,先上最终的效果图
效果并不是很好看,但是这不是重点。
首先,我们先看下布局:
<template>
<div class="shopcar" id="demo04">
<div class="header-title">
<h3>购物车</h3>
</div>
<div class="car-list">
<ul>
<li class="car-item" v-for="(item,index) in good_list">
<div class="input-block">
<label class="input-label" :class="{active: item.is_selected}" :for="'car-checkbox-'+index" @click="select_one(index)"></label>
</div>
<div class="car-item-content">
<div class="car-img">
<img :src="item.img" />
</div>
<div class="car-cont">
<h3>{{item.title}}</h3>
<div class="cat-desc">
<span v-for="spec in item.spec_item">{{spec}}</span>
</div>
</div>
评论0