element-plus 中的Switch开关 注意点

hykeda1年前TypeSctipt524

在使用Switch开关时,发现v-model可以绑定boolean / string / number 三种类型的数据,默认绑定的是布尔型。但是后台返回的数据是数字形型的,0或1

const abc = "1";

<el-switch v-model="abc" active-value="1" inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>

这样展示是正常的,因为 active-value="1" 这里的选中的值1是字符串型的,上面定义的abc也是字符串型的。

如果我们abc定义为number:

const abc = 1;

<el-switch v-model="abc" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>

switch中选中的active-value前面必须加上冒号 不然是字符串型,和abc的number不相等。

标签: eleswitchvue3

相关文章

vite.config.js配置@

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path f...

useRoute,userRouter的用法

 import { useRoute, useRouter } from 'vue-router'; 这里的useRoute是获取传递的变量:const route...

直接在浏览器中使用 vue3+element-plus中icons的方法

首先引入文件,如果用cdn的方式:<script src="//unpkg.com/@element-plus/icons-vue"></script&...

vue3 拖拽插件 vue.draggable.next

官网地址:https://github.com/SortableJS/vue.draggable.next安装:npm i -S vuedraggable@next引入插...

vue3中给响应式数据赋值操作,以及toRef 和 toRefs区别

最近在开发vue3时,定义了一个变量:let form = reactive({});form = res.items;这里我将接口获取到的数据直接赋给了form,这样我在表单中:<el-for...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。