快捷導(dǎo)航

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

更新時(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ù)值問題

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"/*開啟時(shí)的值*/
:inactive-value="2"/*關(guān)閉時(shí)的值*/

  // 開關(guān)變化
SwitchChange(event) {
    /*點(diǎn)擊時(shí)他會自動(dò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)文章

vue-resource 攔截器（interceptor）的使用詳解
本篇文章主要介紹了vue-resource 攔截器（interceptor）的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
解決vue-router進(jìn)行build無法正常顯示路由頁面的問題
下面小編就為大家分享一篇解決vue-router進(jìn)行build無法正常顯示路由頁面的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
Vue filter介紹及其使用詳解
本篇文章主要介紹了Vue filter介紹及其使用詳解，VueJs 提供了強(qiáng)大的過濾器API，能夠?qū)?shù)據(jù)進(jìn)行各種過濾處理。一起跟隨小編過來看看吧
2017-10-10
el-elementUI使用el-date-picker選擇年月
本文主要介紹了el-elementUI使用el-date-picker選擇年月,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-02-02
vue使用$store.commit() undefined報(bào)錯(cuò)的解決
這篇文章主要介紹了vue使用$store.commit() undefined報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue的狀態(tài)庫管理實(shí)現(xiàn)示例
Vuex 是 Vue.js 官方推薦的狀態(tài)管理庫之一，本文主要介紹了vue的狀態(tài)庫管理實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下
2024-04-04
解決Vue Loading PostCSS Plugin failed:Cann
這篇文章主要介紹了解決Vue Loading PostCSS Plugin failed:Cannot find module autoprefixer問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue如何自定義按鈕單選和多選
這篇文章主要介紹了vue如何自定義按鈕單選和多選問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue.js原理分析之nextTick實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了關(guān)于Vue.js原理分析之nextTick實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
vue路由傳參刷新后數(shù)據(jù)丟失問題及解決
這篇文章主要介紹了vue路由傳參刷新后數(shù)據(jù)丟失問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03