uniapp中使用uview实现点击选中符合或不符合

在 UniApp 中，如果你想要利用 UView UI 框架实现在列表或者其他组件上通过点击实现“选择符合”或“选择不符合”的功能，你可以使用 `<u-checkbox-group>` 组件结合 `<u-checkbox>` 来实现。这里是一个基本的例子：

<template>
  <view class="container">
    <u-checkbox-group v-model="selectedOptions" @change="onChange"> <!-- u-checkbox-group -->
      <u-checkbox :label="item.title" v-for="(item, index) in options" :key="index"></u-checkbox> <!-- u-checkbox 列表 -->
    </u-checkbox-group>
    <div slot="footer">
      <button @click="selectAll">全选</button>
      <button @click="selectAllInvert">反选</button>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { title: '选项1', checked: false },
        { title: '选项2', checked: true },
        // ... 更多选项
      ],
      selectedOptions: [], // 存储当前选中的选项
    };
  },
  methods: {
    onChange(selectedOption) {
      // 当用户点击某项时，处理选中或取消选中操作
      console.log('选择了:', selectedOption);
    },
    selectAll() {
      this.options.forEach(item => item.checked = true);
      this.selectedOptions = this.options;
    },
    selectAllInvert() {
      this.options.forEach(item => item.checked = !item.checked);
      this.selectedOptions = this.options.filter(item => item.checked);
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
}
</style>

在这个例子中，`<u-checkbox-group>` 用于显示可选项，`v-model` 用于绑定数据模型 `selectedOptions`。当用户点击 `<u-checkbox>` 时，`onChange` 方法会被触发。`selectAll` 和 `selectAllInvert` 方法分别用于全选所有选项和将所有选项反选。