vue+vant实现全选和计算总价，设置列表样式

在Vue.js中结合Vant UI库实现全选和计算总价功能以及自定义列表样式，你可以这样做：

1. **全选和总价计算**:
- 首先，在数据中定义一个数组用于存储商品信息，并包含一个布尔属性`isSelect`表示是否被选中，以及一个价格字段如`price`。

   data() {
     return {
       goodsList: [
         { name: '商品A', price: 100, isSelect: false },
         //...
       ],
       totalPrice: 0,
     };
   }

- 创建一个全选按钮事件处理器，遍历`goodsList`更新所有商品的`isSelect`状态，并动态计算`totalPrice`。

   methods: {
     toggleAllSelection() {
       this.goodsList.forEach((item) => (item.isSelect = !item.isSelect));
       this.updateTotalPrice();
     },
     updateTotalPrice() {
       let sum = 0;
       this.goodsList.forEach((item) => {
         if (item.isSelect) {
           sum += item.price;
         }
       });
       this.totalPrice = sum.toFixed(2); // 保留两位小数
     },
   }

2. **设置列表样式**:
- 使用Vant中的`van-list`组件，可以配置项模板(`template`)和选中样式(`active-item-class`或`active-class`):

   <van-list :loadmore="false" :finished="true">
     <van-list-item v-for="(item, index) in goodsList" :key="index" @click="toggleItem(index)">
       <div class="list-item" :class="{ selected: item.isSelect }">
         {{ item.name }}
         <span>￥{{ item.price }}</span>
       </div>
     </van-list-item>
   </van-list>

   <style scoped>
     .list-item {
       // 自定义普通项样式
     }
     .selected {
       /* 选中时的样式 */
     }
   </style>

- 在`.selected`类中添加你需要的全选后的显示效果，比如背景颜色变化。

**相关问题--:**
1. 如何在Vant中绑定`v-model`到列表中的`isSelect`属性？
2. 怎样阻止用户直接修改`totalPrice`数据？
3. 如何在Vue中处理单个商品的点击事件并更新对应的价格状态？