uniapp中怎麼實作單選框

PHPz
發布: 2023-04-18 17:05:40
原創
5526 人瀏覽過

在uniapp中,單選框是一種常見的互動控件,用於使用者選擇一項或多項選項的場景,例如在註冊頁面中選擇性別、在設定頁面中選擇語言等。本文將詳細介紹在uniapp中如何實作單選框,包括基本的HTML語法和Vue.js語法。

  1. 基本HTML語法

在原生HTML中,單選框透過標籤實現,其type屬性設定為radio即可實作單選框。同時,需要為每個單選框設定value屬性,確定該單選框代表的選項,例如:

登入後複製

其中,name#屬性設定為相同的值,表示這兩個單選框是同一組,只能選擇其中的一個;value屬性分別設定為malefemale,表示每個單選框所代表的選項。

  1. Vue.js語法

在uniapp中,我們可以使用Vue.js語法方便地實作單選框。透過v-model指令將選項的值綁定到資料模型上,當使用者選擇某個單選框時,模型的值將會相應變化。例如:

 
登入後複製

其中,v-model指令將gender屬性與單選框關聯起來,當使用者選擇某個單選框時,gender屬性的值會自動更新。最終,使用者選擇的值會在模板中顯示出來。

要注意的是,v-model指令只能使用在表單元素上,例如