vue 购物车案例（加全选，单选）

最新推荐文章于 2024-07-16 16:33:57 发布

z逍遥

最新推荐文章于 2024-07-16 16:33:57 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/zyq51/article/details/106889094

版权

本文介绍了如何在Vue项目中实现购物车功能，包括全选和单选操作。特别提示，由于使用了特定的JSON数据格式，直接操作代码可能遇到问题，建议在Visual Studio Code中进行编译并利用其格式化功能。

摘要由CSDN通过智能技术生成

vue 购物车案例（加全选，单选）

<template> 
 <div class="home">  
 //左右联动的左部分
   <div class="left">     
    <div      
      :id="selindex===index? 'sel':''"       
       v-for="(item,index) in data"        
       :key="index"       
        @click="onlick(index)"      >
        {
   {
   item.anchor_point}}
        </div>  
          </div>
    <div class="right" ref="res"> 
   //左右联动的右侧
         <div ref="qq" style="width:100%;"
          v-for="(item,index) in data" :key="index">
   <div v-for="(items,index) in item.commodity_list" :key="index">
       <div class="div">      
           <img :src="items.comm_image" width="50px" height="50px" /> 
       <div style="width:100%">              
       <p style="font-size:12px;">{
   {
   items.comm_title}}</p>              
       <p class="po" style="font-size:12px;color:red;margin-top:10px;">
       <span>￥{
   {
   items.fabulous}}</span>                
       <span class="iconfont icon-jiahao" @click="toCart(items)"></span>              
       </p>   
      </div>         
       </div>       
        </div>    
          </div>  
            </div>   
             <div class="bottom">     
             //购物车的内容
                <p class="cc">            
                <span class="iconfont icon-gwc" @click="th"></span>           
                 <span class="math">{
   {
   this.cart.length}}</span>     
                    </p>     
                       <p style="color:red"> 
                       <span>{
   {
   totalMoney}}￥</span> &nbsp;&nbsp;
                       <span>{
   {
   nn}}件</span> 
                        </p>        
                        <p style="width:110px;text-align:center;background:red;">结算</p>   
                         </div>   
                          <div class="d" v-show="show">       
                           <p >            
                            <span @click="ch">x</span> &nbsp;        
                                <span>               
                                  <input type="checkbox" v-model="one"
                                   @click="change" />全选            
                              </span>            
                                       </p>    
    <div class="sd" v-for="(item,index) in cart" :key="index">    
             <input type="checkbox" class="c" :checked="item.checked" @click="OnClick(item,index)" />       
                 <img :src="item.dd.comm_image" width="50px" height="50px" />            <div style="width:100%">          
                     <p style="font-size:12px;">{
   {
   item.dd.comm_title}}</p>   
                    <p class="po" style="font-size:12px;color:red;margin-top:10px;">
                    <span>￥{
   {
   item.dd.fabulous}}</span>                
                    <span style="margin-right:15px;">             
                     <button @click="jian(item)">-</button>            
                       {
   {
   item.num}}              
                       <button @click="jia(item)">+</button>           
                        </span>              
           <span @click="del(index)" style="float:right" class="iconfont icon-shanchu">
           </span>             
            </p>            
            </div>        
            </div>    
            </div>  
            </div>
            </template>
<script>
export default {
   
        data() {
   
            return {
      
               data: [],   
              selindex: 0, 
              show: false,  
              cart:[],   
              one:false   
               }; 
                },  
       computed: {
       
           del(index) {