使用了vue以後,發現這真的是一個靈活高效的框架,能夠輕鬆實現頁面的實時刷新。
那麼,今天先聊聊單選框的使用。一般我們使用單選框,會這麼寫:
//HTML
<input type="radio" name="radios" value="1" checked><label>one</label>
<br>
<input type="radio" name="radios" value="2"><label>two</label>
<br>
<input type="radio" name="radios" value="2"><label>three</label>
有”checked”屬性的單選框會默認選中。
但在vue裏這是無效的,因爲它會跟具體的參數值綁定。(後來看到vue的官網教程,確實寫了這麼一段:v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值。因爲它會選擇 Vue 實例數據來作爲具體的值。你應該通過 JavaScript 在組件的 data 選項中聲明初始值。)
//HTML
<input type="radio" name="radios" value="1" v-model="param"><label>one</label>
<br>
<input type="radio" name="radios" value="2" v-model="param"><label>two</label>
<br>
<input type="radio" name="radios" value="3" v-model="param"><label>three</label>
//JS
export default{
data(){
return{
param:'1' //設置默認值爲1,即設置第一個單選框爲選中狀態
}
}
}