vue中radio单选框如何实现取消选中状态问题.docxVIP

第

vue中radio单选框如何实现取消选中状态问题

目录vueradio单选框如何取消选中状态客户需求如何获取radio的选中值、选中状态方法1方法2总结

vueradio单选框如何取消选中状态

客户需求

单选radio选中后，再次点击需要可以取消选择功能

页面有很组多单选，要实现一个方法就能兼容

话不多说直接上代码

??spanv-for=iteminradioData:key=item.value

?????????????inputtype=radio@click=chcekRadio($event)name=abutmentValv-model=myData.abutmentVal:id=Abutment+item.id:value=item.id/

?????????????label:for=Abutment+item.id:value=item.id{{}}/label

????????????/span

?//vue中radio单选框单击取消选中状态

??chcekRadio($event){

???let_this=this;

???letobjVal=_this.myData[$];

???window.setTimeout(()={

????if(!!objValobjVal==$event.target.value){

?????$event.target.checked=false

?????_this.myData[$]=

????}

???},0);

??},

如何获取radio的选中值、选中状态

方法1

设置v-model

!DOCTYPEhtml

html

head

metacharset=utf-8

titletest/title

scriptsrc=/vue/2.2.2/vue.min.js/script

/head

body

divid=app

inputtype=radioname=testv-for=(item,index)inlist:value=item.valuev-model=checkedValue

button@click=test获取选中的值/button

/div

script

varvm=newVue({

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标识，循环该数组渲染radio，点击按钮时再统一去判断

!DOCTYPEhtml

html

head

metacharset=utf-8

titletest/title

scriptsrc=/vue/2.2.2/vue.min.js/script

/head

body

divid=app

inputtype=radioname=testv-for=(item,index)inlist:value=item.value:checked=item.isCheck@change=changeInput(index)

button@click=test获取选中的值/button

/div

script

varvm=newVue({

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)={

i