vue中el-checkbox、el-switch綁定值問題詳解
更新時(shí)間：2024年01月20日 08:28:16 作者：司徒小北
這篇文章主要給大家介紹了關(guān)于vue中el-checkbox、el-switch綁定值問題的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
一、el-checkbox綁定值用0 1表示
注：增加兩個(gè)屬性值即可 :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類型）對(duì)應(yīng)el-switch值true（打開）狀態(tài)，值為0（number類型）對(duì)應(yīng)el-switch值false（關(guān)閉）狀態(tài)。
<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">備選項(xiàng)</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>
顯示效果：
總結(jié)
到此這篇關(guān)于vue中el-checkbox、el-switch綁定值問題的文章就介紹到這了,更多相關(guān)vue el-checkbox、el-switch綁定值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue打包 npm run build-test突然不動(dòng)了的問題
這篇文章主要介紹了解決vue打包 npm run build-test突然不動(dòng)了的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue3如何在setup中獲取元素引用(ref)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
關(guān)于vue.extend和vue.component的區(qū)別淺析
最近工作中遇到了vue.extend,vue.component，但二者之間的區(qū)別與聯(lián)系是什么呢？下面這篇文章主要給大家介紹了關(guān)于vue.extend和vue.component區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章介紹了Vue.js中v-for指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
Vue在echarts?tooltip中添加點(diǎn)擊事件案例詳解
本文主要介紹了Vue項(xiàng)目中在echarts?tooltip添加點(diǎn)擊事件的案例詳解，代碼具有一定的價(jià)值，感興趣的小伙伴可以來學(xué)習(xí)一下2021-11-11
這篇文章主要介紹了Vue+ ArcGIS JavaScript APi,文中需要注意ArcGIS JavaScript3.x 和ArcGIS JavaScript 4.x框架差異較大，本文從環(huán)境搭建開始到測(cè)試運(yùn)行給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue的子父組件傳值之小白必看篇，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue下拉菜單組件化開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本文介紹了使用scp2庫將構(gòu)建后的文件上傳到生產(chǎn)或測(cè)試環(huán)境的方案,包括安裝scp2、編寫環(huán)境腳本、忽略腳本、添加npm腳本命令及執(zhí)行步驟,該方法簡(jiǎn)便但不夠安全,適合快速部署2025-11-11
vscode的確是前端開發(fā)中很好的工具，安裝顏色插件，從視覺上是美的享受。這篇文章主要介紹了vscode中vue代碼顏色插件 ,需要的朋友可以參考下2018-10-10