使用vue如何默認選中單選框


使用了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,即設置第一個單選框為選中狀態
        }
    }
}

參考博客:
Vue.js學習筆記——表單控件實踐
表單輸入綁定——Vue.js
---------------------
作者:sone_yoonyul
來源:CSDN
原文:https://blog.csdn.net/sone_yoonyul/article/details/78421717?utm_source=copy
版權聲明:本文為博主原創文章,轉載請附上博文鏈接!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM