vue中radio單選框如何實現取消選中狀態(tài)問題
更新時間：2023年05月11日 15:24:25 作者：qiandeqiande
這篇文章主要介紹了vue中radio單選框如何實現取消選中狀態(tài)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue radio單選框如何取消選中狀態(tài)
客戶需求
單選radio選中后，再次點擊需要可以取消選擇功能
頁面有很組多單選，要實現一個方法就能兼容
話不多說直接上代碼
? ?<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數組list，每項設置一個isCheck標識，循環(huán)該數組渲染radio，點擊按鈕時再統一去判斷
<!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> 總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue watch監(jiān)聽取不到this指向的數問題
這篇文章主要介紹了vue watch監(jiān)聽取不到this指向的數問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
今天遇到一個復制粘貼的需求,研究之后發(fā)現太簡單了,這篇文章主要給大家介紹了關于vue中js實現點擊復制文本到剪貼板的3種方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
本篇文章主要介紹了淺談Vue SSR 的 Cookies 問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
代碼添加了一個vDistpickerHandle的事件處理函數對地區(qū)選擇器中的數據進行處理,將數據存儲到form對象的相應屬性中,方便數據提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vue3中如何獲取鼠標在瀏覽器x軸和y軸的位置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本篇文章主要介紹了vue.js之vue-cli腳手架的搭建詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
詳細講解如何創(chuàng)建, 發(fā)布自己的 Vue UI 組件庫
當我們自己開發(fā)了一個 _UI Component_, 需要在多個項目中使用的時候呢? 我們首先想到的可能是直接復制一份過去對嗎?我們?yōu)槭裁床话l(fā)布一個 UI 組件庫給自己用呢?下面小編和大家來一起學習下吧2019-05-05
這篇文章主要為大家詳細介紹了VUE 3D輪播圖封裝實現方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
詳解vue中使用vue-quill-editor富文本小結（圖片上傳）
這篇文章主要介紹了詳解vue中使用vue-quill-editor富文本小結（圖片上傳），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue3關于ref和reactive的區(qū)別分析，文中通過示例代碼介紹的非常詳細，具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-06-06