vue中el-checkbox、el-switch绑定值问题详解

更新时间：2024年01月20日 08:28:16 作者：司徒小北

这篇文章主要给大家介绍了关于vue中el-checkbox、el-switch绑定值问题的相关资料,文中通过代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下

一、el-checkbox绑定值用0 1表示

注：增加两个属性值即可 :true-label="1" :false-label="0"

// v-model="item.status" item.status如果是1表示true，0表示false
<el-checkbox :true-label="1" :false-label="0" v-model="item.status"></el-checkbox>

二、el-switch值true、false改为number类型的1和0

后端返回的值为1（number类型）对应el-switch值true（打开）状态，值为0（number类型）对应el-switch值false（关闭）状态。

<el-switch 
	:active-value="1" 
	:inactive-value="0" 
	v-model="item.status">
</el-switch>

举例：

<template>
<div>
  <div v-for="(item, index) in collapseList" :key="index">

    <el-checkbox :true-label="1" :false-label="0" v-model="item.status">备选项</el-checkbox>

    <el-switch :active-value="1" :inactive-value="0" v-model="item.status"></el-switch>

  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      collapseList: [{ status: 1 }, { status: 0 }]
    };
  },
  methods: {}
};
</script>
<style lang="less">
</style>

显示效果：

总结

到此这篇关于vue中el-checkbox、el-switch绑定值问题的文章就介绍到这了,更多相关vue el-checkbox、el-switch绑定值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决vue打包 npm run build-test突然不动了的问题
这篇文章主要介绍了解决vue打包 npm run build-test突然不动了的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue3如何在setup中获取元素引用(ref)
这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
关于vue.extend和vue.component的区别浅析
最近工作中遇到了vue.extend,vue.component，但二者之间的区别与联系是什么呢？下面这篇文章主要给大家介绍了关于vue.extend和vue.component区别的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-08-08
Vue.js中v-for指令的用法介绍
这篇文章介绍了Vue.js中v-for指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
Vue在echarts tooltip中添加点击事件案例详解
本文主要介绍了Vue项目中在echarts tooltip添加点击事件的案例详解，代码具有一定的价值，感兴趣的小伙伴可以来学习一下
2021-11-11
Vue+ ArcGIS JavaScript APi详解
这篇文章主要介绍了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差异较大，本文从环境搭建开始到测试运行给大家讲解的非常详细，需要的朋友可以参考下
2022-11-11
Vue的子父组件传值之小白必看篇
这篇文章主要介绍了Vue的子父组件传值之小白必看篇，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue下拉菜单组件化开发详解
这篇文章主要为大家详细介绍了Vue下拉菜单组件化开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
VUE自动化部署全过程
本文介绍了使用scp2库将构建后的文件上传到生产或测试环境的方案,包括安装scp2、编写环境脚本、忽略脚本、添加npm脚本命令及执行步骤,该方法简便但不够安全,适合快速部署
2025-11-11
详解vscode中vue代码颜色插件
vscode的确是前端开发中很好的工具，安装颜色插件，从视觉上是美的享受。这篇文章主要介绍了vscode中vue代码颜色插件 ,需要的朋友可以参考下
2018-10-10