uni-app 内置组件:Switch

switch 组件是一个开关选择器。

API

以下是 switch 组件的 API 介绍:

属性列表

  • checked:是否选中,可以使用 v-model 双向绑定数据。
  • disabled:是否禁用。
  • type:样式,有效值:switch, checkbox。
  • color:switch 的颜色,同 css 的 color。

事件列表

  • change:checked 改变时触发 change 事件,event.detail={ value:布尔值 }

示例

以下是 switch 组件在页面中的使用示例:

html 复制代码
<switch :checked="isSwitchOn" @change="switchChange" />

JavaScript 部分:

javascript 复制代码
export default {
  data() {
    return {
      isSwitchOn: false // 初始化开关为关闭状态
    };
  },
  methods: {
    switchChange: function(event) {
      this.isSwitchOn = event.detail.value; // 获取开关状态
    }
  }
}

在这个示例中,switch 组件显示为一个开关按钮,用户可以通过点击来切换状态。switchChange 方法在开关状态变化时被触发,用以更新数据 isSwitchOn。

更详细的内容请参考最新的 uni-app 官方文档。

相关推荐
小蒜学长41 分钟前
基于SpringBoot+Vue的云南地区扶贫助农系统的设计与实现(代码+数据库+LW)
java·vue.js·spring boot·后端·乡村振兴
雪芽蓝域zzs2 小时前
WebStorm Uniapp Support + Uniapp Tool + Uniappx Language Service讲解
vue.js·uni-app·webstorm
OpenTiny社区2 小时前
AI 生成的 Vue 代码,终于能直接用了!
前端·vue.js·github
tryCbest3 小时前
Vue3——第 12 篇:组合式 API(下)——Composables 与逻辑3
vue.js
LuHang18 小时前
从天地图切换到高德地图:一次真实的底图迁移实战
前端·vue.js·cesium
ruanno_top21 小时前
Vue 3 后台权限路由:我漏掉了按钮级裁剪,还把 403 写成了 404
vue.js
栉甜1 天前
Vue2学习内容(上)
前端·javascript·vue.js·学习
小郎君6581 天前
(六)el-cascader 的展示值为什么不能直接 join:emitPath、路径还原与多选去重
vue.js·算法
用户093671755411 天前
用 4500 行 TypeScript 复刻了童年方格纸上的海战棋
前端·vue.js
行走的陀螺仪1 天前
Claude Code 从入门到实战(一):安装、登录与第一个Vue项目
前端·javascript·vue.js