用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;
    }

效果如圖