vue中radio單選框如何實現(xiàn)取消選中狀態(tài)問題
vue radio單選框如何取消選中狀態(tài)
客戶需求
單選radio選中后,再次點擊需要可以取消選擇功能
頁面有很組多單選,要實現(xiàn)一個方法就能兼容
話不多說直接上代碼
? ?<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
設置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
如果不想每次點擊都判斷,那就提供一個思路,定義一個radio數(shù)組list,每項設置一個isCheck標識,循環(huán)該數(shù)組渲染radio,點擊按鈕時再統(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>
總結
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue?動態(tài)添加el-input的實現(xiàn)邏輯
這篇文章主要介紹了vue?動態(tài)添加el-input的實現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06Vue-router結合transition實現(xiàn)app前進后退動畫切換效果的實例
下面小編就為大家?guī)硪黄猇ue-router結合transition實現(xiàn)app前進后退動畫切換效果的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10Vue 中使用lodash對事件進行防抖和節(jié)流操作
這篇文章主要介紹了Vue 中使用lodash對事件進行防抖和節(jié)流操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue-electron項目創(chuàng)建記錄及問題小結解決方案
這篇文章主要介紹了vue-electron項目創(chuàng)建記錄及注意事項,本文給大家分享了運行項目報錯的問題小結及多種解決方案,需要的朋友可以參考下2024-03-03詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-02-02vue2.0實現(xiàn)的tab標簽切換效果(內(nèi)容可自定義)示例
這篇文章主要介紹了vue2.0實現(xiàn)的tab標簽切換效果,結合實例形式分析了vue.js實現(xiàn)內(nèi)容可自定義的tab點擊切換功能相關操作技巧,需要的朋友可以參考下2019-02-02vue 標簽屬性數(shù)據(jù)綁定和拼接的實現(xiàn)方法
這篇文章主要介紹了vue 標簽屬性數(shù)據(jù)綁定和拼接的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05