美国vps服务器的vue中如何判断radio是否选中

已关闭留言

美国vps服务器的vue中判断radio是否选中的方法:1、设置v-model方法进行判断;2、给vue定义一个radio数组list,在list中每项设置一个isCheck标识进行判断即可。

方法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标识,循环该数组渲染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>