欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中el-checkbox、el-switch綁定值問題詳解

 更新時間：2024年01月20日 08:28:16   作者：司徒小北  
這篇文章主要給大家介紹了關(guān)于vue中el-checkbox、el-switch綁定值問題的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用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類型）對應(yīng)el-switch值true（打開）狀態(tài)，值為0（number類型）對應(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • webpack如何打包一個按需引入的vue組件庫

    webpack如何打包一個按需引入的vue組件庫

    在vue項(xiàng)目開發(fā)中,我們會將經(jīng)常用到的邏輯或模塊抽象成組件,對于那些多個項(xiàng)目都有用到的組件,可以考慮封裝成組件庫,這篇文章主要給大家介紹了關(guān)于webpack如何打包一個按需引入的vue組件庫的相關(guān)資料,需要的朋友可以參考下
    2022-02-02
  • Vue el-table組件如何實(shí)現(xiàn)將日期格式化

    Vue el-table組件如何實(shí)現(xiàn)將日期格式化

    這篇文章主要介紹了Vue el-table組件如何實(shí)現(xiàn)將日期格式化問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • Vue中引用assets中圖片的實(shí)現(xiàn)方式

    Vue中引用assets中圖片的實(shí)現(xiàn)方式

    這篇文章主要介紹了Vue中引用assets中圖片的實(shí)現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue基礎(chǔ)popover彈出框編寫及bug問題分析

    Vue基礎(chǔ)popover彈出框編寫及bug問題分析

    這篇文章主要為大家介紹了Vue基礎(chǔ)popover彈出框編寫及bug問題分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-09-09
  • 一文帶你搞懂Vue?Loader是如何工作的

    一文帶你搞懂Vue?Loader是如何工作的

    Vue?Loader?作為一個?webpack?的?Loader,扮演著將?.vue?文件轉(zhuǎn)化為瀏覽器可執(zhí)行代碼的角色,下面就跟隨小編一起深入了解Vue?Loader?的技術(shù)細(xì)節(jié)與工作機(jī)制吧
    2024-12-12
  • element表格去掉表頭的實(shí)現(xiàn)方法

    element表格去掉表頭的實(shí)現(xiàn)方法

    本文主要介紹了element表格去掉表頭的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-10-10
  • vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問題

    vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問題

    這篇文章主要介紹了vue項(xiàng)目之webpack打包靜態(tài)資源路徑不準(zhǔn)確的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表（1）

    VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表（1）

    這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-06-06
  • vue混入mixin的介紹及理解

    vue混入mixin的介紹及理解

    混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復(fù)用功能。一個混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)
    2022-08-08
  • Vue項(xiàng)目本地沒有問題但部署到服務(wù)器上提示錯誤(問題解決方案)

    Vue項(xiàng)目本地沒有問題但部署到服務(wù)器上提示錯誤(問題解決方案)

    一個 VUE 的項(xiàng)目在本地部署沒有問題，但是部署到服務(wù)器上的時候提示訪問資源的錯誤，遇到這樣的問題如何解決呢？下面小編給大家?guī)砹薞ue項(xiàng)目本地沒有問題但部署到服務(wù)器上提示錯誤的解決方法，感興趣的朋友一起看看吧
    2023-05-05

最新評論