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>
相关推荐
neeef_se21 分钟前
前端速通(CSS)
前端·css
陈大爷(有低保)33 分钟前
LayUI结合SSM框架
前端·javascript·layui
niew~36 分钟前
用uni-app写的开灯、关灯的面板界面
前端·javascript·uni-app
假意诗人1 小时前
【NextJS】Arco Design与Next.js快速上手
开发语言·javascript·arco design
等一场春雨1 小时前
react 页面数据缓存方案
javascript·react.js·缓存
柠檬豆腐脑1 小时前
跨语言集成:将 Python 的强大功能带入 Nodejs 应用
前端·python·node.js
m0_748234341 小时前
【SpringMVC】基于 Spring 的 Web 层MVC 框架
前端·spring·mvc
阿福的工作室1 小时前
react跳转传参的方法
前端·react.js·前端框架
远洋录1 小时前
大型前端应用状态管理实战:从 Redux 到 React Query 的演进之路
前端·人工智能·react
liuweni1 小时前
Next.js系统性教学:深入理解缓存交互与API缓存管理
开发语言·前端·javascript·经验分享·缓存·前端框架·交互