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（打開）狀態(tài)，值為0（number類型）對應el-switch值false（關閉）狀態(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">備選項</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綁定值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

webpack如何打包一個按需引入的vue組件庫
在vue項目開發(fā)中,我們會將經(jīng)常用到的邏輯或模塊抽象成組件,對于那些多個項目都有用到的組件,可以考慮封裝成組件庫,這篇文章主要給大家介紹了關于webpack如何打包一個按需引入的vue組件庫的相關資料,需要的朋友可以參考下
2022-02-02
Vue el-table組件如何實現(xiàn)將日期格式化
這篇文章主要介紹了Vue el-table組件如何實現(xiàn)將日期格式化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue中引用assets中圖片的實現(xiàn)方式
這篇文章主要介紹了Vue中引用assets中圖片的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue基礎popover彈出框編寫及bug問題分析
這篇文章主要為大家介紹了Vue基礎popover彈出框編寫及bug問題分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
一文帶你搞懂Vue?Loader是如何工作的
Vue?Loader?作為一個?webpack?的?Loader,扮演著將?.vue?文件轉(zhuǎn)化為瀏覽器可執(zhí)行代碼的角色,下面就跟隨小編一起深入了解Vue?Loader?的技術細節(jié)與工作機制吧
2024-12-12
element表格去掉表頭的實現(xiàn)方法
本文主要介紹了element表格去掉表頭的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
vue項目之webpack打包靜態(tài)資源路徑不準確的問題
這篇文章主要介紹了vue項目之webpack打包靜態(tài)資源路徑不準確的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
VUEJS實戰(zhàn)之構建基礎并渲染出列表（1）
這篇文章主要為大家詳細介紹了VUEJS實戰(zhàn)之構建基礎并渲染出列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
vue混入mixin的介紹及理解
混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項
2022-08-08
Vue項目本地沒有問題但部署到服務器上提示錯誤(問題解決方案)
一個 VUE 的項目在本地部署沒有問題，但是部署到服務器上的時候提示訪問資源的錯誤，遇到這樣的問題如何解決呢？下面小編給大家?guī)砹薞ue項目本地沒有問題但部署到服務器上提示錯誤的解決方法，感興趣的朋友一起看看吧
2023-05-05