radio单选框的name属性是互斥的,如果使用v-model,可以不使用name就可以互斥。
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<label for="male">男</label>
<input type="radio" id="male" value="男"v-model='sex' />
<label for="radio">女</label>
<input type="radio" id="female" value="女" v-model='sex'/>
<h2>你的性别{{sex}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data(){
return{
sex:'男'
}
}
})
</script>
</body>
</html>
v-model绑定`sex`属性,初始值为“男”,选择女后`sex`属性变成“女”,因为此时是双向绑定。