vue 實(shí)現(xiàn)單選框設(shè)置默認(rèn)選中值
更新時(shí)間：2019年11月07日 11:41:50 作者：dong-v
今天小編就為大家分享一篇vue 實(shí)現(xiàn)單選框設(shè)置默認(rèn)選中值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
vue中單選框的默認(rèn)選中不同于傳統(tǒng)方式設(shè)置checked,是通過(guò)在data中設(shè)置vulue來(lái)實(shí)現(xiàn)的
html部分是通過(guò)v-for取的后臺(tái)的數(shù)據(jù)
<li v-for="(value,i) in addList" :key="value.id"> <input class="radio" type="radio" name="radios" :value="i" v-model="radio" /> </li>
生成后的代碼就是
<li> <input class="radio" type="radio" name="radios" value="0" v-model="radio" /> <input class="radio" type="radio" name="radios" value="1" v-model="radio" /> <input class="radio" type="radio" name="radios" value="2" v-model="radio" /> </li>
js部分（只需要將v-model的data值設(shè)置為想要默認(rèn)選中的value值即可）
//在data中設(shè)置默認(rèn)選中第一個(gè) radio:'0',
以上這篇vue 實(shí)現(xiàn)單選框設(shè)置默認(rèn)選中值就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中實(shí)現(xiàn)全屏以及對(duì)退出全屏的監(jiān)聽(tīng)
本文主要介紹了vue中實(shí)現(xiàn)全屏以及對(duì)退出全屏的監(jiān)聽(tīng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
el-menu如何根據(jù)多層樹(shù)形結(jié)構(gòu)遞歸遍歷展示菜單欄
這篇文章主要介紹了el-menu根據(jù)多層樹(shù)形結(jié)構(gòu)遞歸遍歷展示菜單欄,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
vue:axios請(qǐng)求本地json路徑錯(cuò)誤問(wèn)題及解決
這篇文章主要介紹了vue:axios請(qǐng)求本地json路徑錯(cuò)誤問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
關(guān)于ELement?UI時(shí)間控件el-date-picker誤差8小時(shí)的問(wèn)題
本文探討了在使用Vue前端框架配合ElementUI開(kāi)發(fā)時(shí),遇到日期時(shí)間選擇器DateTimePicker的時(shí)間同步問(wèn)題,通過(guò)揭示中國(guó)東八區(qū)與格林威治時(shí)間的時(shí)差,作者提供了設(shè)置value-format屬性的解決方案,以確保后端接收到的正確時(shí)間格式2024-08-08
Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例
最近在學(xué)習(xí)前段后分離，本文介紹了Vue+Element+Springboot圖片上傳的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下2021-11-11
使用Vue與Firebase構(gòu)建實(shí)時(shí)聊天應(yīng)用的示例代碼
隨著互聯(lián)網(wǎng)通訊技術(shù)的不斷進(jìn)步,實(shí)時(shí)聊天應(yīng)用現(xiàn)在已成為我們?nèi)粘Ｉ钪胁豢苫蛉钡囊徊糠?無(wú)論是社交媒體平臺(tái)、工作溝通工具還是客戶支持系統(tǒng),實(shí)時(shí)聊天都在不斷被需求,今天,我們將介紹如何使用Vue.js與Firebase來(lái)構(gòu)建一個(gè)簡(jiǎn)單而強(qiáng)大的實(shí)時(shí)聊天應(yīng)用,需要的朋友可以參考下2024-11-11
vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)
這篇文章主要介紹了vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開(kāi)箱即用）
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開(kāi)箱即用） ,需要的朋友可以參考下2018-11-11
Vue實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)的示例代碼
本文主要介紹了Vue實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了vue中v-bind:style效果的自定義指令，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01