vue添加删除购物车结算特效代码下载


vue添加删除购物车结算特效代码下载
vue添加删除购物车结算特效代码下载以及添加删除、购物车结算等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/vue.js"></script>

2. HTML代码

		<div id="app">
			<ul>
				<li class="clearfix" v-for="(item,index) in list" :key="item.id">
					<input type="checkbox" class="fl minInput" v-model="item.pd" @click="itemClick(index)"/>
					<img :src="item.imgUrl" class="fl" :class="{active:item.isActive}"/>
					<span class="fl">{{item.price.toFixed(2)}}</span>
					<div class="priceFrom clearfix fl">
						<span class="fl" @click="item.num++">+</span>
						<input class="fl" type="text" v-model="item.num" />
						<span class="fl" @click="item.num<=0?0:item.num--">-</span>
					</div>
					<span class="fl">{{item.num*item.price|priceNum}}</span>
					<span class="fl" style="color:red;margin-left:5px;" @click="deleteClick(index)">删除</span>
				</li>
			</ul>
			<div class="footer">
				<input type="checkbox" @click="totalClick" v-model="totalInt"/>全选
				<div class="goodsNum">
					已选商品 <span style="margin:0px 5px;">{{goodsNum}}</span>件 合计:
					<span style="margin:0px 5px;">{{totalNum}}</span>元
				</div>
			</div>
		</div>

相关推荐

发表评论

相关文章