uniappcheckbox学习笔记

REDVM • 2025-04-13 11:45 • 编程

一、什么是uniappcheckbox

uniappcheckbox是Uni-app框架中的一个组件，该组件用于在应用中显示一个复选框。复选框可以用于让用户选择一个或多个选项。

<template>
  <view>
    <uni-checkbox v-model="isChecked">复选框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true
      };
    }
  }
</script>

在上面的代码示例中，vue-checkbox组件通过v-model绑定了一个isChecked变量，isChecked变量控制复选框是否选中。

二、如何使用uniappcheckbox

1.基本用法

基本的用法，无非就是将组件嵌套在视图中，并绑定数据即可。

<template>
  <view>
    <uni-checkbox v-model="isChecked">复选框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true
      };
    }
  }
</script>

2.带标签的用法

在这种用法中，可以在组件中添加文本、图像等标签以增强组件的视觉效果。

<template>
  <view>
    <uni-checkbox v-model="isChecked">
      <image src="img/check-icon.svg"></image>
      <span>选择</span>
    </uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true
      };
    }
  }
</script>

3.禁用状态的用法

在这个用法中，组件被禁用，无法响应用户的交互操作。

<template>
  <view>
    <uni-checkbox v-model="isChecked" disabled>复选框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true
      };
    }
  }
</script>

4.多选用法

在这个用法中，可以使用v-for循环动态生成多个复选框，并根据不同的选择来生成组合数据。

<template>
  <view>
    <ul>
      <li v-for="(item,index) in dataList" :key="index">
        <uni-checkbox v-model="item.isChecked">{{item.text}}</uni-checkbox>
      </li>
    </ul>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dataList: [
          {
            text: '复选框1',
            isChecked: false
          },
          {
            text: '复选框2',
            isChecked: false
          },
          {
            text: '复选框3',
            isChecked: false
          }
        ]
      };
    }
  }
</script>

三、通用属性

uniappcheckbox组件有多个通用属性，这里对其中几个常用属性进行介绍。

1.checked

checked属性控制复选框是否选中。

<template>
  <view>
    <uni-checkbox :checked="isChecked" @change="onChange">复选框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isChecked: true
      };
    },
    methods: {
      onChange(e) {
        console.log(e.detail.value)
      }
    }
  }
</script>

2.disabled

disabled属性控制是否禁用组件。

<template>
  <view>
    <uni-checkbox :disabled="isDisabled" @change="onChange">复选框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isDisabled: true
      };
    },
    methods: {
      onChange(e) {
        console.log(e.detail.value)
      }
    }
  }
</script>

四、事件处理

uniappcheckbox组件有两个事件change和click。change事件会在checkbox选项改变时被触发，而click事件会在组件被点击时触发。

<template>
  <view>
    <uni-checkbox @change="onChange" @click="onClick">复选框</uni-checkbox>
  </view>
</template>

<script>
  export default {
    methods: {
      onChange(e) {
        console.log(e.detail.value)
      },
      onClick() {
        console.log('click')
      }
    }
  }
</script>

五、总结

通过本文的学习，我们可以了解到uniappcheckbox是Uni-app框架中的一个组件，可以实现复选框的显示和控制。我们可以通过不同的用法、属性和事件来扩展和定制这个组件从而满足不同的需求。

原创文章，作者：REDVM，如若转载，请注明出处：https://www.506064.com/n/369577.html