v-model应用radio单选按钮
<!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>
截图:
v-model应用checkbox多选按钮
复选框分为两种情况:单个勾选框和多个勾选框
单个勾选框:v-model即为布尔值,此时input的value并不影响v-model的值
多个复选框:
当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组
当选中某一个时,就会将input的value添加到数组中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 有label,可以点击文字,也可以直接勾选按钮-->
<!-- 1.演示单选框-->
<label for="license">
<input type="checkbox" id="license" v-model="isAgree">同意协议
</label>
<h2>您选择的是:{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button>
<hr>
<!-- label没有id,那么点击文字,就不能达到勾选的目的,就只能去点击框勾选-->
<label for="">
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="排球" v-model="hobbies">排球
</label>
<h2>您选择的爱好是:{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
isAgree:false,//单选框
hobbies:[] //多选框
}
})
</script>
</body>
</html>
运行截图:
v-model:select
和checkbox一样,select也分单选和多选两种情况
单选:只能选中一个值
v-model绑定的是一个值
当我们选中option中的一个时,会将它对应的value赋值到mySelect中
多选:可以选中多个值
v-model绑定的是一个数组
当选中多个值时,就会将选中的option对应的value添加到数组mySelects中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.选择一个-->
<select name="fruits" id="" v-model="fruit">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
<option value="哈密瓜">哈密瓜</option>
</select>
<h2>您选择的水果是:{{fruit}}</h2>
<hr>
<!-- 2.选择多个-->
<select name="fruits" id="" v-model="fruits" multiple>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="榴莲">榴莲</option>
<option value="葡萄">葡萄</option>
<option value="哈密瓜">哈密瓜</option>
</select>
<h2>您选择的水果是:{{fruits}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
fruit:'',
fruits:[]
}
})
</script>
</body>
</html>
运行截图: