用Vue实现一个简单的购物车模块

用 Vue实现一个简单的购物车模块

附上效果图

CSS文件最后附上

HTMl文件：

<div id="main">
        <div class="car ">
            <h2>
                <span class="goodsname">商品名称</span>
                <span class="goodsprevprice">总价</span>
                <span class="goodsprice">订购价</span>
                <span class="count">数量</span>
                <span class="option">操作</span>
            </h2>
            <ul>
            	<!-- v-for来循环vue实例对象中的数据进行渲染 -->
                <li class="clear" v-for='(item,index) in list'>
                    <!-- ：class 根据每种商品的active判定是否存在这个类 以此来改变是否被选中的样式 -->
                    <!-- @click添加一个点击事件  实现点击之后改变每一种商品的active属性以达到改变商品的选中状态效果 -->
                    <i :class="{'active':item.active}" @click='handleSelect(index)'></i>
                    <a href="javascript:void(0)" class="img">
                        <img :src="item.url" alt="" class="l">
                    </a>
                    <a href="javascript:void(0)" class="content">
                        <span>{{ item.name }}</span>
                        <br>
                        <span>顺丰快递深圳发货</span>
                    </a>
                    <span class="prevprice">￥{{ item.total }}</span>
                    <span class="nowprice">￥{{ item.price }}</span>
                    <div class="addreduce l">
                    	<!-- 添加点击按钮count-1事件 -->
                        <a href="javascript:void(0)" class="reduce" @click='reduceCount(index)' >-</a>
                        <input type="text"  v-model.number='item.count'>
                        <!-- 添加点击按钮count+1事件 -->
                        <a href="javascript:void(0)" class="add" @click='addCOunt(index)'>+</a>
                    </div>
                    <div class="options l">
                    	<!-- 添加点击按钮删除该条商品信息事件 -->
                        <a href="javascript:void(0)" @click='deleteOne(index)'>删除</a>
                    </div>
                </li>
            </ul>
        </div>

        <div class="goshop clear">
        	<!-- 添加删除所有选中商品的信息事件 -->
            <a href="javascript:void(0)" class="go l clear" @click='deleteSel'>
                <span>删除选中</span>
            </a>
            <!-- 添加点击全选或取消全选事件  用类来判断是否已经全选来改变此按钮的显示样式 -->
            <div class="l selectAll" @click.passive='selectAll' :class='{active:selall}'>选中全部</div>
            <div class="charge r">
            	<!-- 此处总价使用computed属性计算可以根据其他值的变化而变化 -->
               <span class="total">￥{{ totalPrice }}</span>
                <a href="javascript:void(0)" class="gocharge">去结算</a>
            </div>
            <div class="selectCount r">
            	<!-- 次数商品总数量使用computed属性可以根据其他商品的选中状态而改变 -->
                <span class="total">{{ totalCount }}</span><span>件商品总计(不计运费):</span>
            </div>
        </div>
    </div>

js代码：

//创建Vue实例对象
new Vue({
	//选择根节点和设置属性
    el:'#main',
    data:{
        list:[
            {
            	//判断商品在购物车页面是否被选中
                active:true,
                //每一种商品的单价
                price:298,
                //每一种商品的数量
                count:1,
                //每一条商品的总价 此处设置初始值为0 在渲染之前进行计算
                total:0,
                //每一条商品图片的地址  图片均来自花礼网
                url:'https://img01.hua.com/uploadpic/newpic/1073266.jpg_80x87.jpg',
                //每一条商品的名称或描述
                name:'[礼品]永生花满月艺术台灯/嫣红一永生花台灯'
            },
            {
                active:true,
                price:398,
                count:2,
                total:0,
                url:'https://img01.hua.com/uploadpic/newpic/1073263.jpg_80x87.jpg',
                name:'[礼品]永生花满月艺术台灯/朦胧粉一永生花台灯'
            },
            {
                active:true,
                price:198,
                count:2,
                total:0,
                url:'https://img01.hua.com/uploadpic/newpic/1073186.jpg_80x87.jpg',
                name:'[礼品]我如此爱你-口红款520一Dior#520口红(专柜正'
            },
            {
                active:true,
                price:498,
                count:1,
                total:0,
                url:'https://img01.hua.com/uploadpic/newpic/1060030.jpg_80x87.jpg',
                name:'[礼品]Be My Love一 厄瓜多尔进口红色永生玫瑰2枝'
            }
        ]
    },
    //在第一次渲染之前根据每一中商品的单价和数量计算出当前的每一条信息的总价
    beforeMount(){
        this.list.forEach((item)=>{
            item.total = item.price * item.count
        })
        // console.log();
    },
    //在每一次数据发货所能了变化之后仍需要再次计算总价
    beforeUpdate(){
        // console.log(1);
        this.list.forEach((item)=>{
            item.total = item.price * item.count
        })
        // console.log();
    },
    //编写购物车的方法
    methods:{
    	//根据index改变每种商品的选中状态
        handleSelect(index){
            this.list[index].active = !this.list[index].active;
        },
        //根据index改变该商品的数量-1 count为0要限制
        reduceCount(index){
            if(this.list[index].count !== 0){
                this.list[index].count--; 
            }
        },
        //根据index改变该商品的数量+1
        addCOunt(index){
            this.list[index].count++; 
        },
        //根据index删除一条商品
        deleteOne(index){
            this.list.splice(index,1)
        },
        //根据active状态删除所有被选中的商品
        deleteSel(){
            for(var index = 0; index < this.list .length; index++){
                if(this.list[index].active){
                    this.list.splice(index,1);
                    index--;
                }
            }
        },
        //全选或取消全选
        selectAll(){
            var flag = true;
            for(var index in this.list){
                if(!this.list[index].active){
                    flag = false;
                }
                this.list[index].active = true;
            }
            if(flag){
                for(var index in this.list){
                    this.list[index].active = false;
                }
            }
        }
    },
    computed:{
    	// 总数计算
        totalCount(){
            var count = 0;
            for(var index in this.list){
                if(this.list[index].active){
                    count++;
                }
            }
            return count;
        },
        //总价计算
        totalPrice(){
            var price = 0;
            for(var index in this.list){
                if(this.list[index].active){
                    price += this.list[index].count * this.list[index].price;
                }
            }
            return price;
        },
        //计算是否全被选中
        selall(){
            for(var index in this.list){
                if(!this.list[index].active){
                    return false;
                }
            }
            return true;
        }

    }
})

CSS

* {
  padding: 0px;
  margin: 0px; }

img {
  display: block; }

a {
  text-decoration: none;
  font-size: 12px;
  color: black; }

li {
  list-style: none; }

input, button {
  outline: none; }

h1, h2, h3, h4, h5 {
  line-height: 1;
  font-size: 16px; }

i, strong {
  font-style: none; }

.l {
  float: left; }

.r {
  float: right; }

.clear::after {
  content: "";
  display: block;
  clear: both; }

.container {
  width: 1200px;
  margin: 0 auto; }

.container_fluid {
  width: 100%; }
.nogoods {
  display: none;
  width: 990px;
  margin: 0 auto;
  position: relative; }
  .nogoods a {
    position: absolute;
    display: block;
    left: 419px;
    top: 105px;
    height: 27px;
    width: 80px;
    line-height: 27px;
    text-align: center;
    font-size: 13px;
    color: white;
    background: #ff6a00;
    border-radius: 5px; }

.car {
  width: 990px;
  margin: 50px auto;
  margin-bottom: 0px;
  border: 1px solid #d9d9d9; }
  .car h2 {
    line-height: 40px;
    height: 40px;
    background: #ebebeb; }
    .car h2 span {
      font-size: 12px;
      font-weight: 600;
      color: #737373; }
      .car h2 span.goodsname {
        margin-left: 57px; }
      .car h2 span.goodsprevprice {
        margin-left: 416px; }
      .car h2 span.goodsprice {
        margin-left: 77px; }
      .car h2 span.count {
        margin-left: 87px; }
      .car h2 span.option {
        margin-left: 92px; }
  .car ul li {
    height: 88px;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #d9d9d9; }
    .car ul li:last-of-type {
      border-bottom: none; }
    .car ul li i {
      display: block;
      border-radius: 50%;
      border: 1px solid #232628;
      float: left;
      width: 20px;
      height: 20px;
      margin-top: 34px; }
      .car ul li i.active {
        background: url(http://img02.hua.com/pc/assets/img/ico_checkout.png);
        background-size: contain; }
    .car ul li .img img {
      margin-left: 16px;
      height: 100%;
      float: left; }
    .car ul li .content {
      float: left;
      margin-top: 24px;
      margin-left: 20px;
      width: 360px; }
      .car ul li .content span:first-of-type {
        font-size: 15px;
        color: #737373; }
      .car ul li .content span:last-of-type {
        font-size: 15px;
        color: #ff6a00; }
      .car ul li .content:hover span {
        color: #ff6a00;
        text-decoration: underline; }
    .car ul li .prevprice {
      float: left;
      color: #ff6a00;
      margin-top: 24px;
      width: 120px; }
    .car ul li .nowprice {
      float: left;
      margin-top: 24px;
      /* margin-left: 120px; */
      width: 104px;
      color: #232628; }
    .car ul li .addreduce {
      margin-top: 24px;
      width: 70px; }
      .car ul li .addreduce a {
        border: 1px solid #d9d9d9;
        display: block;
        float: left;
        height: 12px;
        line-height: 12px;
        font-size: 12px;
        width: 12px;
        text-align: center;
        margin-top: 5px; }
      .car ul li .addreduce input {
        border: 1px solid #d9d9d9;
        text-align: center;
        width: 39px;
        height: 22px;
        float: left; }
    .car ul li .options {
      margin-top: 24px;
      margin-left: 67px; }
      .car ul li .options a {
        display: block;
        color: #737373; }
        .car ul li .options a:hover {
          text-decoration: underline;
          color: #ff6a00; }

.goshop {
  width: 990px;
  height: 50px;
  border: 1px solid #d9d9d9;
  margin: 20px auto; }
  .goshop .go {
    display: block;
    height: 100%;
    margin-left: 20px; }
    .goshop .go i {
      width: 22px;
      height: 22px;
      background: url(../images/common_z.png) -68px -318px;
      display: block;
      float: left;
      margin-top: 15px; }
    .goshop .go span {
      line-height: 50px;
      margin-left: 5px; }
  .goshop .charge span {
    font-size: 14px;
    color: #737373;
    line-height: 50px; }
  .goshop .charge .total {
    font-size: 15px;
    color: #ff6a00;
    font-weight: 600; }
  .goshop .charge .gocharge {
    width: 120px;
    height: 100%;
    background: #ff6a00;
    color: white;
    font-size: 18px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    display: block;
    float: right;
    margin-left: 20px; }
    .goshop  .selectCount {
      font-size: 14px;
      line-height: 52px;
      /* margin-right: 30px; */
    }
    .goshop  .selectCount .total{
      color: #ff6a00;
      /* margin-right: 10px; */
    }
    .goshop  .selectAll{
      font-size: 12px;
      line-height: 50px;
      margin-left: 20px;
      color: #ff6a00;
      cursor: pointer;
      /* margin-right: 10px; */
    }
    .goshop  .selectAll.active{
      color: #737373;
    }

效果如图