element中el-switch的v-model自定义值的实现
更新时间：2023年11月29日 09:32:01 作者：老马甲
在el-switch中设置active-value和inactive-value属性,接受Boolean, String或Number类型的值,本文就来介绍一下element中el-switch的v-model自定义值的实现,感兴趣的可以了解一下
一、问题
element中的el-switch的值默认都是true或false，但是有些时候后端接口该字段可能是0或者1，如果说再转换一次值，那就有点太费力了。如下所示：
<template>
<el-switch
inactive-text="否"
active-text="是"
v-model="status"
@change="changeSwitch"
/>
</template>
<script>
export default {
data() {
return {
status: false
}
},
methods: {
changeSwitch(e) {
console.info(e)
}
}
}
</script>
二、解决
在el-switch中设置active-value和inactive-value属性，接受Boolean, String或Number类型的值
<el-switch
inactive-text="否"
active-text="是"
active-value="1"
inactive-value="0"
v-model="status"
/>
三、官方文档
到此这篇关于element中el-switch的v-model自定义值的实现的文章就介绍到这了,更多相关element el-switch v-model自定义值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近有项目需求，需要在加入新机构的时候，需要选择它的上级机构，下面把代码整理，分享给大家，需要的朋友可以参考下2015-09-09
严格模式就是使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。下面通过代码相结合的形式给大家介绍js中的严格模式，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要为大家详细介绍了基于javascript html5实现多文件上传的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
关联数组虽然可以用字符串作下标，但是这个下标是不支持参数传值的，换言之，你需要什么就取什么，听起来很智能，实际上你取值仍然需要你手动去写下标的2012-05-05
这篇文章主要教大家简单实现JS计算器功能,实现小数点校验，重复计算，以及大量更符合用户体验的操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
TypeScript装饰器的作用、结构、类型及其应用场景（代码示例）
文章介绍了装饰器的作用、结构、类型及其应用场景,装饰器是一种特殊类型的声明,可以附加到类、方法、访问符、属性或参数上,通过在不改变原有代码的情况下扩展功能,文章还提供了装饰器的具体实现示例,包括类装饰器、方法装饰器、参数装饰器和属性装饰器2026-02-02
这篇文章主要为大家详细介绍了微信小程序实现收货地址左滑删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
工作中经常会使用到判断一个字符串是否包含某一个字符串，因此总结一下几个方法,需要的朋友可以参考下2023-03-03
可折叠区域的基本思想：通过点击某个地方来显示或隐藏屏幕中的某个区域。2010-10-10
js实现tab选项卡函数代码，需要的朋友可以参考下，这样的代码也是比较常用的，相当原理也比较简单。2010-04-04
最新评论