element-plus中使用el-switch时,用‘0,1’或者0,1来代替true,false绑定

介绍

switch 开关默认用 true, false来绑定的,但是在实际的项目中,有时候根据后端的接口返回,也可能会用字符串01 ,或者数字 0,1来代替; 具体实现如下
详情: 主要实现方式是通过使用el-switch组件里的 active-valueinactive-value 属性来实现;

  1. 默认的使用方式:通过boolean(布尔类型)来控制开关,代码如下:
<el-switch v-model="value1" />
<script setup>
	import { ref } from 'vue'
	const value1 = ref(true);
</script>
  1. 使用 number 类型来控制开关,代码如下:
<el-switch v-model="value1"
  :active-value="1"
  :inactive-value="0"
  />
<script setup>
	import { ref } from 'vue'
	const value1 = ref(1);
</script>
  1. 使用 String 类型来控制开关,代码如下:
<el-switch v-model="value1"
  active-value="1"
  inactive-value="0"
  />
<script setup>
	import { ref } from 'vue'
	const value1 = ref('1');
</script>

总结

  1. switch 开关默认用 布尔类型:true, false来绑定的
  2. Number 类型的值 active-valueinactive-value 前面要加 冒号
  3. String 类型的值 active-valueinactive-value 前面不用加 冒号

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-01 17:46:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-01 17:46:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-05-01 17:46:02       87 阅读
  4. Python语言-面向对象

    2024-05-01 17:46:02       96 阅读

热门阅读

  1. k8s pod 镜像拉取策略

    2024-05-01 17:46:02       27 阅读
  2. Python解释器:编程界的“翻译官”

    2024-05-01 17:46:02       29 阅读
  3. ps基础学习笔记-颜色模式

    2024-05-01 17:46:02       29 阅读
  4. 排序试题(一)

    2024-05-01 17:46:02       33 阅读
  5. “IP地址的未来:IPv6的机遇与挑战“

    2024-05-01 17:46:02       34 阅读
  6. CSS背景图像显示方式

    2024-05-01 17:46:02       35 阅读
  7. Element-UI快速入门

    2024-05-01 17:46:02       37 阅读
  8. 以AI技术与街景影像重塑城市研究

    2024-05-01 17:46:02       31 阅读