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