一丶案例代码
<!--作者:key-->
<!--浏览工具:Chrome-->
<!--开发工具:WebStorm-->
<!--开发时间:2020/11/21 14:53-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="male">
<!-- 如果不加name,会导致可以同时勾选男女,加上name,那么提交给数据库的时候,key是唯一的sex,所以只能选一个-->
<!-- <input type="radio" id="male" name="sex">男-->
<!-- 当然了,如果我们加上v-model,并且绑定同一个元素的话,name就可以不添加了,因为也是互斥的-->
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="female">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>您选择的性别是:{{sex}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
//sex:'' ''为空,没有默认值
//sex:'男' 默认为男,因为双向绑定,所以也会默认勾选男
sex:'男'
}
})
</script>
</body>
</html>