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项目开发中,我们会将经常用到的逻辑或模块抽象成组件,对于那些多个项目都有用到的组件,可以考虑封装成组件库,这篇文章主要给大家介绍了关于webpack如何打包一个按需引入的vue组件库的相关资料,需要的朋友可以参考下2022-02-02
这篇文章主要介绍了Vue el-table组件如何实现将日期格式化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了Vue中引用assets中图片的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家介绍了Vue基础popover弹出框编写及bug问题分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
Vue Loader 作为一个 webpack 的 Loader,扮演着将 .vue 文件转化为浏览器可执行代码的角色,下面就跟随小编一起深入了解Vue Loader 的技术细节与工作机制吧2024-12-12
本文主要介绍了element表格去掉表头的实现方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue项目之webpack打包静态资源路径不准确的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了VUEJS实战之构建基础并渲染出列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
混入(mixin)提供了一种非常灵活的方式，来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项2022-08-08
Vue项目本地没有问题但部署到服务器上提示错误(问题解决方案)
一个 VUE 的项目在本地部署没有问题，但是部署到服务器上的时候提示访问资源的错误，遇到这样的问题如何解决呢？下面小编给大家带来了Vue项目本地没有问题但部署到服务器上提示错误的解决方法，感兴趣的朋友一起看看吧2023-05-05
最新评论