vue小实验——小米商城购物车，合计、结算、数量加减

一、简述

采用vue实现购物车的功能，主要是对购物车内的数量、价格、合计等，话不多说直接放图。

二、上代码

 1、html板块

这个部分每个人的布局排版都不一样你们可以适当参考，可能我的布局显得很臃肿

<div id="root">
		<!-- 头部导航栏 -->
		<header>
			<div class="headnav">
				<div class="leftnav">
					<img src="./img/小米shop/logo.png">
					<div class="title">
						<p>我的购物车</p>
						<span>温馨提示：产品是否购买成功，以组中下单为准哦，请尽快结算</span>
					</div>
				</div>
				<div class="rightnav">
					<span>登录</span> |
					<span>注册</span>
				</div>
			</div>
		</header>
		<!-- 主体内容 -->
		<div class="content">
			<!-- 购物车部分 -->
			<div class="shopcar">
				<div class="no-select" v-if="active==false">
					<h2>你的购物车还是空的哟！！！</h2>
					<p>登录后将显示您之前加入的商品</p>
					<div class="denglu">
						<button>立即登录</button>
						<button>马上购物</button>
					</div>
				</div>
				<div class="select">
					<div class="firstnav" v-if="car.length">
						<!--  -->
						<div class="col" @click="allchecked($event)">
							<i :class="all">√</i>
							全选
						</div>
						<div class="col"></div>
						<div class=" col">商品名称</div>
						<div class=" col">单价</div>
						<div class=" col ">数量</div>
						<div class=" col ">小计</div>
						<div class=" col">操作</div>
					</div>

					<div class="twonav" v-if="item.check==true" v-for="(item,idx) in car" :key='idx'>
						<div class="col" @click="changeCheck($event,idx)">
							<i :class="item.flag?'active':''">√</i>
						</div>
						<div class="col">
							<img :src="item.src" alt="">
						</div>
						<div class=" col">{
  {item.name}}</div>
						<div class=" col">{
  {item.price | addIcon}}</div>
						<div class="col">
							<div class="count">
								<button @click='reduce(item.id)'>-</button>
								<input type="text" v-model="item.num">
								<button @click="add(item.id)">+</button>
							</div>

						</div>
						<div class="col heji">{
  {parseFloat(item.price*item.num).toFixed(2)}}元</div>
						<div class="col ">
							<span class="del" @click="quxiao($event,item.id)">X</span>
						</div>

					</div>
				</div>
				<div class="continue" v-if="car.length!=0">
					<div class="jixu">
						<span>继续购物</span> |
						<span>已选择<i>{
  {goodsnum}}</i>件</span>
					</div>
					<div class="account">
						<p>合计：
							<em>{
  {zongjiage}}</em>
							元
						</p>
						<!--  -->
						<h1 :class="!g