uni-app 单选多选功能插件

在 uni-app 中实现单选和多选功能，可以利用 Vue.js 的数据绑定和事件处理机制来构建。以下是一个简单的示例，展示了如何实现单选和多选功能，而不需要额外的插件。

单选功能示例

1. 模板部分 (template):

<view>
  <radio-group @change="radioChange">
    <label v-for="(item, index) in radioItems" :key="index">
      <radio :value="item.value">{{ item.text }}</radio>
    </label>
  </radio-group>
  <text>选中的值: {{ selectedRadio }}</text>
</view>

1. 脚本部分 (script):

export default {
  data() {
    return {
      radioItems: [
        { value: 'apple', text: 'Apple' },
        { value: 'banana', text: 'Banana' },
        { value: 'cherry', text: 'Cherry' }
      ],
      selectedRadio: ''
    };
  },
  methods: {
    radioChange(e) {
      this.selectedRadio = e.detail.value;
    }
  }
};

多选功能示例

1. 模板部分 (template):

<view>
  <checkbox-group @change="checkboxChange">
    <label v-for="(item, index) in checkboxItems" :key="index">
      <checkbox :value="item.value">{{ item.text }}</checkbox>
    </label>
  </checkbox-group>
  <text>选中的值: {{ selectedCheckboxes }}</text>
</view>

1. 脚本部分 (script):

export default {
  data() {
    return {
      checkboxItems: [
        { value: 'apple', text: 'Apple' },
        { value: 'banana', text: 'Banana' },
        { value: 'cherry', text: 'Cherry' }
      ],
      selectedCheckboxes: []
    };
  },
  methods: {
    checkboxChange(e) {
      this.selectedCheckboxes = e.detail.value;
    }
  }
};

总结

以上代码展示了如何在 uni-app 中实现单选和多选功能。通过 radio-group 和 checkbox-group 组件，我们可以轻松管理用户的选择。radioChange 和 checkboxChange 方法用于处理用户的选择变化，并更新相应的数据绑定。

在实际项目中，你可能需要根据具体需求调整选项数据、样式以及事件处理逻辑。uni-app 提供了丰富的组件和 API，可以满足大多数开发需求，而无需额外依赖第三方插件。