Vue.js搭建移动端购物车界面－基本结构和数据渲染

最新推荐文章于 2024-04-27 09:42:37 发布

fareise

最新推荐文章于 2024-04-27 09:42:37 发布

阅读量4.7k

点赞数 4

分类专栏： javascript 前端开发常用技巧经验记录文章标签： Web前端 javascript Vue.js

本文链接：https://blog.csdn.net/fareise/article/details/75433588

版权

本文介绍了如何使用Vue搭建一个移动端购物车界面，最终实现的功能包括：

1. 选择要最终购买的物品

2. 选择每件物品购买的数量

3. 实时更新所选择物品的总价格

HTML部分

首先给出HTML部分代码和注释，显示了整个界面的结构。

<body>
   <div class="checkout">
     <div id="app">
       <div class="container">
         <div class="cart">
           <div class="checkout-title">
              <span>购物车</span>
           </div>
 
           <!-- table -->
           <div class="item-list-wrap">
              <divclass="cart-item">
                <divclass="cart-item-head">
                  <ul>
                    <li>商品信息</li>
                    <li>商品金额</li>
                    <li>商品数量</li>
                    <li>总金额</li>
                    <li>编辑</li>
                  </ul>
                </div>
                <ulclass="cart-item-list">
                  <!--productList在Vue组件中的data定义，包含全部数据，使用v-for进行遍历显示-->
                  <li v-for="item inproductList">
                    <divclass="cart-tab-1">
                      <divclass="cart-item-check">
                        <!--Vue2.0中想为HTML标签绑定属性，必须使用v-bind:，绑定内容为对象，这里为a标签绑定check属性，属性值为item中的checked值-->
                        <!--@click是v-on:click的缩写，为这个按钮绑定了点击事件，对应Vue组件methods中定义的方法selectProduct-->
                        <ahref="javascript:void 0" class="item-check-btn"v-bind:class="{'check': item.checked}"@click="selectedProduct(item)">
                          <svgclass="icon icon-ok"><usexlink:href="#icon-ok"></use></svg>
                        </a>
                      </div>
                     <divclass="cart-item-pic">
                        <imgv-bind:src="item