vue中radio單選框如何實(shí)現(xiàn)取消選中狀態(tài)問題
vue radio單選框如何取消選中狀態(tài)
客戶需求
單選radio選中后,再次點(diǎn)擊需要可以取消選擇功能
頁面有很組多單選,要實(shí)現(xiàn)一個(gè)方法就能兼容
話不多說直接上代碼
? ?<span v-for="item in radioData" :key="item.value"> ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="radio" @click="chcekRadio($event)" name="abutmentVal" v-model="myData.abutmentVal" :id="'Abutment'+ item.id" :value="item.id" /> ? ? ? ? ? ? ? ? ? ? ? ? ? <label :for="'Abutment'+ item.id" :value="item.id">{{ item.name }}</label> ? ? ? ? ? ? ? ? ? ? ? ? </span>
?//vue中radio單選框單擊取消選中狀態(tài) ? ? chcekRadio ($event) { ? ? ? let _this = this; ? ? ? let objVal = _this.myData[$event.target.name]; ? ? ? window.setTimeout(() => { ? ? ? ? if (!!objVal && objVal == $event.target.value) { ? ? ? ? ? $event.target.checked = false ? ? ? ? ? _this.myData[$event.target.name] = '' ? ? ? ? } ? ? ? }, 0); ? ? },
如何獲取radio的選中值 、選中狀態(tài)
方法1
設(shè)置v-model
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id='app'> <input type="radio" name="test" v-for="(item,index) in list" :value="item.value" v-model="checkedValue"> <button @click="test">獲取選中的值</button> </div> <script> var vm = new Vue({ el:'#app', data(){ return{ checkedValue:'', list:[{value:1},{value:2},{value:3}] } }, methods:{ test(){ console.log('被選中的值為:'+this.checkedValue) } } }); </script> </body> </html>
方法2
如果不想每次點(diǎn)擊都判斷,那就提供一個(gè)思路,定義一個(gè)radio數(shù)組list,每項(xiàng)設(shè)置一個(gè)isCheck標(biāo)識(shí),循環(huán)該數(shù)組渲染radio,點(diǎn)擊按鈕時(shí)再統(tǒng)一去判斷
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id='app'> <input type="radio" name="test" v-for="(item,index) in list" :value="item.value" :checked="item.isCheck" @change="changeInput(index)"> <button @click="test">獲取選中的值</button> </div> <script> var vm = new Vue({ el:'#app', data(){ return{ list:[{value:1,isCheck:false},{value:2,isCheck:false},{value:3,isCheck:false}] } }, methods:{ changeInput(index){ this.list.map((v,i)=>{ if(i==index){ v.isCheck = true }else{ v.isCheck = false } }) }, test(){ this.list.map((v,i)=>{ if(v.isCheck){ console.log('被選中的值為:'+v.value) } }) } } }); </script> </body> </html>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue?動(dòng)態(tài)添加el-input的實(shí)現(xiàn)邏輯
這篇文章主要介紹了vue?動(dòng)態(tài)添加el-input的實(shí)現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06Vue-router結(jié)合transition實(shí)現(xiàn)app前進(jìn)后退動(dòng)畫切換效果的實(shí)例
下面小編就為大家?guī)硪黄猇ue-router結(jié)合transition實(shí)現(xiàn)app前進(jìn)后退動(dòng)畫切換效果的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10vue項(xiàng)目多租戶環(huán)境變量的設(shè)置
本文主要介紹了vue項(xiàng)目多租戶環(huán)境變量的設(shè)置,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能
這篇文章主要介紹了Vue如何實(shí)現(xiàn)自動(dòng)觸發(fā)功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-01-01Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流操作
這篇文章主要介紹了Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue-electron項(xiàng)目創(chuàng)建記錄及問題小結(jié)解決方案
這篇文章主要介紹了vue-electron項(xiàng)目創(chuàng)建記錄及注意事項(xiàng),本文給大家分享了運(yùn)行項(xiàng)目報(bào)錯(cuò)的問題小結(jié)及多種解決方案,需要的朋友可以參考下2024-03-03詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02vue3+ts 兄弟組件之間傳值的實(shí)現(xiàn)
Vue3是一款流行的前端框架,它支持多種傳值方式,包括兄弟組件之間的傳值,本文主要介紹了vue3+ts 兄弟組件之間傳值的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果(內(nèi)容可自定義)示例
這篇文章主要介紹了vue2.0實(shí)現(xiàn)的tab標(biāo)簽切換效果,結(jié)合實(shí)例形式分析了vue.js實(shí)現(xiàn)內(nèi)容可自定義的tab點(diǎn)擊切換功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05