快捷導(dǎo)航

vue el-switch綁定數(shù)值時(shí)需要注意的問(wèn)題

更新時(shí)間：2024年12月26日 09:19:12 作者：-小龍人

在Vue中使用`el-switch`組件時(shí),綁定數(shù)值類型時(shí)應(yīng)使用布爾值（true/false）,而綁定字符串類型時(shí)應(yīng)使用字符串（'true'/'false'）

vue el-switch綁定數(shù)值問(wèn)題

vue el-switch 綁定數(shù)值時(shí)要用

<el-switch v-model="value"
     :active-value="1"
     :inactive-value="0"
     active-color="#13ce66" 
     inactive-color="#ff4949">
</el-switch>

vue el-switch 綁定String時(shí)要用

<el-switch v-model="value"
     active-value="1"
     inactive-value="0"
     active-color="#13ce66" 
     inactive-color="#ff4949">
</el-switch>

el-switch 動(dòng)態(tài)綁定想要的值

如果后端返回給你的數(shù)據(jù)不是true和false或者是1和2動(dòng)態(tài)綁定怎么做？

<el-switch v-model="scope.row.isOpen" active-color="#13ce66" @change="SwitchChange(scope.row)" :active-value="1" :inactive-value="2"
inactive-color="#ff4949"></el-switch>

:active-value="1"/*開(kāi)啟時(shí)的值*/
:inactive-value="2"/*關(guān)閉時(shí)的值*/

  // 開(kāi)關(guān)變化
SwitchChange(event) {
    /*點(diǎn)擊時(shí)他會(huì)自動(dòng)把你綁定的值變更，直接去請(qǐng)求數(shù)據(jù)就可以了*/
    var parms = {
        isOpen: event.isOpen,
        id: event.id
    }
    SonList.Openclose(parms).then(res => {
        this.$message({
            message: res.msg,
            type: 'success'
        })
        this.loading = false
        this.getdata()
    }).catch(error => {
          this.loading = false
          console.log(error)
      })
        console.log(event)
    },

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3中Reactive的使用詳解
Vue 3 的 Composition API 帶來(lái)了強(qiáng)大的 reactive 函數(shù),它允許你在 Vue 應(yīng)用程序中創(chuàng)建響應(yīng)式數(shù)據(jù),本文我們將深入探討 Vue 3 的 reactive,并提供一些注意事項(xiàng)和解決方案,希望可以幫助打更好地使用它
2023-11-11
vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中在可編輯div光標(biāo)位置插入內(nèi)容的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
vue父組件向子組件(props)傳遞數(shù)據(jù)的方法
這篇文章主要介紹了vue父組件向子組件(props)傳遞數(shù)據(jù)的方法,文中給大家補(bǔ)充介紹了vue父子組件間傳值(props)的實(shí)現(xiàn)代碼，需要的朋友可以參考下
2018-01-01
vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決
這篇文章主要介紹了vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue的rules驗(yàn)證部分可以部分又失效的原因及解決方案
vue的rules驗(yàn)證失效,部分可以部分又失效,很多百度都有,但是我這里遇到了一個(gè)特別的,那就是prop沒(méi)有寫(xiě)全,導(dǎo)致驗(yàn)證某一個(gè)失效,接下來(lái)就跟小編一起來(lái)看看這個(gè)失效的原因和解決方案吧
2023-11-11
Vue組件實(shí)現(xiàn)景深卡片輪播示例
這篇文章主要為大家介紹了Vue組件實(shí)現(xiàn)景深卡片輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
Vue全局自定義指令Modal拖拽的實(shí)踐
最近一直在做的項(xiàng)目是Vue2搭建的項(xiàng)目，本文主要介紹了Vue全局自定義指令Modal拖拽的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
使用Vant完成通知欄Notify的提示操作
這篇文章主要介紹了使用Vant完成通知欄Notify的提示操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單方法詳解
vue-element-admin后臺(tái)管理系統(tǒng)模板框架是vue結(jié)合element-ui一體的管理系統(tǒng)框架,下面這篇文章主要給大家介紹了關(guān)于vue-element-admin后臺(tái)生成動(dòng)態(tài)路由及菜單的相關(guān)資料,需要的朋友可以參考下
2023-09-09
vue通過(guò)element樹(shù)形控件實(shí)現(xiàn)樹(shù)形表格
這篇文章主要為大家介紹了vue?element樹(shù)形控件實(shí)現(xiàn)樹(shù)形表格，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-11-11