- 如果复选框checkbox 和下拉框select是多选，v-model的值是 数组类型,而且要提供value属性
- radio 和checkbox 的分组靠的是v-model,checked 和selected 不存在
- 修饰符 .lazy.number
- 按键修饰符 .enter.ctrl.keyCode
1. 单选框
radio单选框 : 也是通过v-model结合value来使用的,v-model的值 和value 值对应的那项就是被选中项
<!-- radio单选框 也是通过v-model结合value来使用的,v-model的值 和value 值对应的那项就是被选中项 -->
性别:
<input type="radio" v-model='sex' value='男'>男
<input type="radio" v-model='sex' value='女'>女
<input type="radio" v-model='sex' value='不限'>不限
2. 复选框
- 只有一个复选框的时候,会把v-model的值转化成 boolean 类型,true代表选中
- 只有多个复选框的时候,v-model的值的类型必须是 数组, 并增加value属性 .value的值在数组里是选中状态-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model = 'a'>{{a}}
<!-- 复选框:1. 只有一个复选框的时候,会把v-model的值转化成 boolean 类型,true代表选中 -->
<!-- 复选框:2. 只有多个复选框的时候,v-model的值的类型必须是 数组, 并增加value属性 .value的值在数组里是选中状态-->
<hr>
爱好:
<input type="checkbox" v-model='b' value = '游泳'>游泳
<input type="checkbox" v-model='b' value = '吃饭'>吃饭
<input type="checkbox" v-model='b' value = '睡觉'>睡觉
{{b}}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
a:'', // ''空字符串会转化为false,所以复选框是未选中状态
b:[] //多个复选框,v-model值是数组类型,结合value属性,value的值在数组里是选中状态
},
methods:{
}
})
</script>
</body>
</html>
3. 下拉框
- 如果没写value属性,默认取option中间的值
- 请选择这一项要加
disabled- 禁用- 下拉框也是利用
v-model 和 value结合使用,如果是单选,v-model的值可以是字符串,数字- 如果下拉框是多选 multiple,v-model的数据类型需要是 数组 类型
地区(单选):
<select v-model='area'> <!-- 单选,v-model的值可以是字符串,数字 -->
<option disabled>请选择</option> <!-- 请选择这一项要加 `disabled `- 禁用 -->
<option>北京</option> <!--没写value属性,默认取option中间的值 -->
<option>河北</option>
<option>上海</option>
</select>
地区(多选):
<select v-model='areas' multiple> <!--下拉框是多选 multiple,多选是数组类型 -->
<option value="0">请选择</option>
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">上海</option>
</select>
