Vue购物车全选、反选——单选全部选中、全选自动选中以及总价

Vue实现购物车全选与单选功能及总价计算

最新推荐文章于 2024-05-11 17:09:17 发布

原创

最新推荐文章于 2024-05-11 17:09:17 发布 · 3.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #javascript

本文介绍了如何使用Vue.js来实现购物车应用中的全选、反选功能，以及如何动态计算购物车商品的总价。通过模拟购物车数据，渲染页面，判断商品的ischeck状态，并响应全选按钮操作来同步更新所有商品的选中状态。同时，文章还讨论了在数据发生变化时如何自动更新总价，确保代码的复用性。

1.模拟购物车数据

data() {
    return {
      //模拟购物车数据arr
      arr:[
        {
          ischeck:false, //默认为false
          name:'篮球',
          price:98
        },
        {
          ischeck:false, //默认为false
          name:'足球',
          price:10
        },
        {
          ischeck:false, //默认为false
          name:'羽毛球',
          price:5
        },
        {
          ischeck:false, //默认为false
          name:'排球',
          price:100
        }
      ]
    };
  },

2.渲染购物车页面

<template>
  <div>
    <!-- 购物车数据渲染 -->
    <div v-for="(item,index) in arr" :key="index">
      <p>
        <input type="checkbox" v-model="item.ischeck">
        {
  
  {item.name}}  -------价格：{
  
  {item.price}}</p >
    </div>
    <!-- 底部 -->
    <div class="footer">
      <input type="checkbox">全选---
    </div>
  <

最低0.47元/天解锁文章