vue实现商品复选框保持选中状态

在 Vue 中实现商品复选框的保持选中状态，可以通过以下步骤来实现：

1. 在商品列表中添加一个 `checked` 属性来记录商品的选中状态，初始值为 `false`。

2. 在每个商品的复选框上绑定 `v-model` 指令，将复选框的选中状态与商品对象的 `checked` 属性进行双向绑定。

3. 在页面加载时，从本地存储中读取商品列表的选中状态，并将其设置到对应的商品对象的 `checked` 属性中。

4. 在商品列表中添加一个全选的复选框，绑定一个 `v-model` 指令，将全选的选中状态与商品列表中所有商品的选中状态进行绑定。

5. 监听商品列表中任意一个商品的 `checked` 属性变化，当有商品的选中状态发生变化时，将商品列表的选中状态保存到本地存储中。

以下是一个示例代码：

<template>
  <div>
    <!-- 商品列表 -->
    <div v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.checked">{{ item.name }} - {{ item.price }}
    </div>

    <!-- 全选复选框 -->
    <div>
      <input type="checkbox" v-model="allChecked">全选
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: '商品1', price: 100, checked: false },
        { name: '商品2', price: 200, checked: false },
        { name: '商品3', price: 300, checked: false },
      ],
      allChecked: false, // 全选的选中状态
    };
  },

  mounted() {
    // 从本地存储中读取选中状态
    const checkedItems = JSON.parse(localStorage.getItem('checkedItems')) || {};

    // 将选中状态设置到商品列表中
    this.items.forEach((item, index) => {
      if (checkedItems[index]) {
        item.checked = true;
      }
    });

    // 监听商品列表中任意一个商品的选中状态变化
    this.$watch('items', () => {
      const checkedItems = {};

      // 保存商品列表的选中状态到本地存储中
      this.items.forEach((item, index) => {
        checkedItems[index] = item.checked;
      });
      localStorage.setItem('checkedItems', JSON.stringify(checkedItems));
    }, { deep: true });
  },
};
</script>

在上述代码中，我们使用了 `localStorage` 来保存商品列表的选中状态，通过监听 `items` 属性的变化，将商品列表的选中状态保存到本地存储中。当页面重新加载时，从本地存储中读取选中状态，并将其设置到对应的商品对象的 `checked` 属性中，从而实现商品复选框的保持选中状态。