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 官方文档。

相关推荐
流烟默19 小时前
SSE 实战:在 SpringBoot + Vue 项目中零依赖实现轻量级实时消息推送
vue.js·spring boot·后端·sse
执子念的飞鱼20 小时前
纯前端预览 275 种文件格式是怎么做到的
前端·vue.js·react.js
vx_Biye_Design1 天前
PHP中医养生馆预约系统60841-计算机课程设计、毕业设计
vue.js·spring boot·后端·mysql·php·课程设计·express
gc_22991 天前
Vue框架学习(1:环境搭建)
vue.js
我的div丢了肿么办2 天前
element-plus表格使用:filter-method过滤导致出现无数据
前端·javascript·vue.js
贾公子2 天前
AI 内容检测 API 接入实战——异步任务、幂等键与轮询的正确写法
vue.js
星光不问赶路人2 天前
Vue 项目类型检查:深入理解 vue-tsc --build
前端·vue.js
WeiXin_DZbishe2 天前
基于springboot装修风格选择系统的设计与开发-计算机毕设【课程设计】77964
java·vue.js·spring boot·后端·python·php·课程设计
雪碧聊技术2 天前
Vue 一个页面中使用多个同类组件出现“串数据“现象?一个 key 就能解决
vue.js·v-show·一个页面使用多个相同组件·解决数据错乱·v-if、key
Java小卷2 天前
Vue3 动态表单支持弹框组件
前端·vue.js·低代码