在Vue中,我們經(jīng)常使用radio(單選框)來(lái)讓用戶從若干選項(xiàng)中選擇一個(gè)。在一些情況下,我們需要設(shè)置一個(gè)默認(rèn)的選項(xiàng),讓用戶可以快速地完成選擇并提交表單。那么,在Vue中,我們?nèi)绾卧O(shè)置radio默認(rèn)選擇呢?
Vue的radio組件內(nèi)部有一個(gè)v-model綁定,可以用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定。我們可以將v-model綁定到選中的radio的值上,從而讓Vue知道用戶選擇的是哪個(gè)選項(xiàng)。而我們要設(shè)置默認(rèn)選擇,也就是在頁(yè)面加載時(shí),直接選中某一個(gè)選項(xiàng),那么我們可以通過(guò)v-model綁定默認(rèn)選擇的值,從而讓該選項(xiàng)在頁(yè)面加載時(shí)就被選中。
Option1 Option2 Option3
在上面的示例代碼中,我們給每一個(gè)radio都綁定了一個(gè)v-model,同時(shí)給它們分別設(shè)置了不同的值option1、option2、option3。在data中,我們將selected的初始值設(shè)置為'option2',也就是說(shuō),在頁(yè)面加載時(shí),第二個(gè)radio就會(huì)被選中。
需要注意的是,在Vue中,我們并不需要手動(dòng)給radio設(shè)置checked屬性來(lái)實(shí)現(xiàn)默認(rèn)選擇,因?yàn)関-model已經(jīng)實(shí)現(xiàn)了這個(gè)功能。如果我們手動(dòng)設(shè)置checked屬性,會(huì)出現(xiàn)默認(rèn)選擇的值與v-model綁定的值不一致的情況,從而導(dǎo)致數(shù)據(jù)錯(cuò)誤。
當(dāng)然,如果我們需要取消默認(rèn)選擇,也非常簡(jiǎn)單,只需要將selected的初始值設(shè)置為null即可。這樣,在頁(yè)面加載時(shí),所有的radio都不會(huì)被選中,等待用戶的選擇。
以上就是Vue中設(shè)置radio默認(rèn)選擇的方法。需要注意的是,在實(shí)際開(kāi)發(fā)中,我們需要顯示地告訴用戶當(dāng)前處于什么狀態(tài),而不要默認(rèn)選擇就是正確的。因此,我們應(yīng)該用比較明顯的方式來(lái)顯示默認(rèn)選擇的狀態(tài),讓用戶可以清晰地看到哪一個(gè)選項(xiàng)被選中了。