element plus的switch开关回显

element plus的switch开关通过 :model-value="" 是绑定值,必须等于 active-valueinactive-value,默认为 Boolean 类型

:active-value="2" 是switch 状态为 on 时的值

:inactive-value="1" 是switch的状态为 off 时的值

javascript 复制代码
<template>
  <el-tooltip :content="'Switch value: ' + value" placement="top">
    <el-switch
      v-model="value"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      active-value="100"
      inactive-value="0"
    />
  </el-tooltip>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('100')
</script>
相关推荐
anOnion11 小时前
构建无障碍组件之Carousel Pattern
前端·html·交互设计
ssshooter11 小时前
Tauri 2 iOS 开发避坑指南:文件保存、Dialog 和 Documents 目录的那些坑
前端·后端·ios
Можно12 小时前
深入理解 ES6 Proxy:与 Object.defineProperty 的全面对比
前端·javascript·vue.js
Birdy_x12 小时前
接口自动化项目实战(1):requests请求封装
开发语言·前端·python
天天向上102414 小时前
vue el-table实现拖拽排序
前端·javascript·vue.js
西西学代码14 小时前
Flutter---回调函数
开发语言·javascript·flutter
卷帘依旧14 小时前
JavaScript 闭包经典问题:为什么输出 10 次 i=10
javascript
柳杉15 小时前
Three.js × Blender:从建模到 Web 3D 的完整工作流深度解析
前端·javascript·数据可视化
reembarkation16 小时前
vue3中使用howler播放音频列表
前端·vue.js·音视频
手握风云-16 小时前
基于 Java 的网页聊天室(三)
服务器·前端·数据库