vue實戰記錄（三）- vue實現購物車功能之渲染商品列表

vue實戰，一步步實現vue購物車功能的過程記錄，課程與素材來自慕課網，本身搭建了express本地服務器來請求數據

做者：狐狸家的魚

本文連接：vue實戰-實現購物車功能（三）

GitHub：sueRimn

模仿網頁考拉的購物車樣式進行了一些修改，以上圖片就是渲染後的效果。

1、cart.js獲取數據

經過AJAX獲取本地的json數據，這裏會出現跨域問題，還好提早搭建了本地服務器，能夠成功獲取數據渲染界面。

當經過get獲取地址數據時，能夠在調試界面看到咱們須要的數據有哪些，從而獲取數據的id，

 

this有可能表明不一樣的對象,而咱們但願_this表明最初的對象，因此聲明：

let _this = this;

而咱們須要獲取商品列表，因此須要把獲取到的數據賦給data，而後渲染到界面。

_this.productList = res.data.result.list; _this.totalMoney = res.data.totalMoney;

完整代碼：

const vm = new Vue({ el:'#app', data: { totalMoney: 0,//總金額
        productList: [],//商品列表
 }, filters: { }, mounted: function() {//掛載 鉤子 實例插入文檔
        this.cartView(); }, methods: { cartView: function() { let _this = this; //獲取數據，返回結果
            this.$http.get("../data/cartData.json", {"id":123}).then(res => { _this.productList = res.data.result.list; _this.totalMoney = res.data.totalMoney; }); } }, })

 

2、渲染界面

在渲染的地方都作了相應的註釋

</div>
                <ul class="cart-item-list">
                  <!-- 列表渲染-對象渲染 -->
                  <li v-for="(item, index) in productList" :key="index">
                    <div class="cart-tab-1">
                      <div class="cart-item-check">
                        <a href="javascript:void 0" class="item-check-btn">
                          <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
                        </a>
                      </div>
                      <div class="cart-item-pic">
                        <!-- 商品圖片 -->
                        <img :src="item.productImage" alt="口紅">
                      </div>
                      <div class="cart-item-title">
                        <!-- 商品名字 -->
                        <div class="item-name">{{item.productName}}</div>
                      </div>
                      <div class="item-include">
                        <dl>
                          <dt>贈送:</dt>
                          <!-- 贈品 -->
                          <dd v-for="part in item.parts" v-text="part.partsName" :key="item.id"></dd>
                        </dl>
                      </div>
                    </div>
                    <div class="cart-tab-2">
                      <!-- 商品單價 -->
                      <div class="item-price">{{item.productPrice}}</div>
                    </div>
                    <div class="cart-tab-3">
                      <div class="item-quantity">
                        <div class="select-self select-self-open">
                          <div class="quantity">
                            <a href="javascript:void 0"></a>
                            <!-- 商品數量 -->
                            <input type="text" value="0" disabled v-model="item.productQuantity">
                            <a href="javascript:void 0" @click="add">+</a>
                          </div>
                        </div>
                        <div class="item-stock">有貨</div>
                      </div>
                    </div>
                    <div class="cart-tab-4">
                      <!-- 商品總金額=單價*數量 -->
                      <div class="item-price-total">{{item.productPrice*item.productQuantity}}</div>
                    </div>
                    <div class="cart-tab-5">
                      <div class="cart-item-operation">
                        <a href="javascript:void 0" class="item-edit-btn">
                          <svg class="icon icon-del"><use xlink:href="#icon-del" ></use></svg>
                        </a>
                        <p>移入個人收藏</p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>