脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → element el-switch v-model自定义值

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自定义值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

最新评论