Uniapp 多选框实现选择状态改变代码示例

<template>
  <view>
    <view v-for='(item, index) in items' :key='index'>
      <checkbox :value='item.checked' @click='changeStatus(index)' />
      <span>{{ item.name }}</span>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { name: 'item1', checked: false },
        { name: 'item2', checked: false },
        { name: 'item3', checked: false },
      ],
    };
  },
  methods: {
    changeStatus(index) {
      this.items[index].checked = !this.items[index].checked;
    },
  },
};
</script>
<p>在上面的示例代码中，我们使用了 'v-for' 指令来渲染多个复选框和对应的选项名称。'items' 数组中包含每个选项的名称和状态，状态使用布尔值表示是否被选中。在 'changeStatus' 方法中，我们根据传入的索引值来改变对应选项的状态。当复选框被点击时，会触发 'click' 事件，我们将该事件绑定到 'changeStatus' 方法上。当选项的状态发生改变时，界面会自动更新以反映最新的状态。</p>