介绍
switch
开关默认用 true, false
来绑定的,但是在实际的项目中,有时候根据后端的接口返回,也可能会用字符串0
和 1
,或者数字 0,1
来代替; 具体实现如下
详情: 主要实现方式是通过使用el-switch
组件里的 active-value
和 inactive-value
属性来实现;
- 默认的使用方式:通过
boolean(布尔类型)
来控制开关,代码如下:
| <el-switch v-model="value1" /> |
| <script setup> |
| import { ref } from 'vue' |
| const value1 = ref(true); |
| </script> |
复制
- 使用
number
类型来控制开关,代码如下:
| <el-switch v-model="value1" |
| :active-value="1" |
| :inactive-value="0" |
| /> |
| <script setup> |
| import { ref } from 'vue' |
| const value1 = ref(1); |
| </script> |
复制
- 使用
String
类型来控制开关,代码如下:
| <el-switch v-model="value1" |
| active-value="1" |
| inactive-value="0" |
| /> |
| <script setup> |
| import { ref } from 'vue' |
| const value1 = ref('1'); |
| </script> |
复制
总结
switch
开关默认用 布尔类型:true, false
来绑定的Number
类型的值 active-value
和 inactive-value
前面要加 冒号
String
类型的值 active-value
和 inactive-value
前面不用加 冒号