uni-app 内置组件:Switch

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

API

以下是 switch 组件的 API 介绍:

属性列表

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

事件列表

  • changechecked 改变时触发 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 官方文档

相关推荐
麦麦大数据44 分钟前
F043 vue+flask天气预测可视化系统大数据+机器学习+管理端+爬虫+超酷界面+顶级可视化水平 【黑色版】
大数据·vue.js·flask·天气预测·气温预测·天气大数据·天气可视化
专注前端30年1 小时前
Vue CLI与Webpack:区别解析与实战使用指南
前端·vue.js·webpack
微风怎知我意2 小时前
前端框架入门怎么选?一篇搞懂 Vue、React、Angular 的取舍之道
vue.js·react.js·前端框架
麦麦大数据2 小时前
F043 vue+flask天气预测可视化系统大数据(浅色版)+机器学习+管理端+爬虫+超酷界面+顶级可视化水平
大数据·vue.js·机器学习·flask·空气质量·天气预测·气温预测
杨筱毅2 小时前
【技术选型】前端框架:Vue vs React - 组合式API与Hooks的哲学之争
vue.js·react.js·前端框架·技术选型
Sheldon一蓑烟雨任平生12 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
paopaokaka_luck13 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
Sheldon一蓑烟雨任平生15 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
zuo-yiran19 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_3168377519 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js