一、默认选项
- radio 的单选操控
默认选项采用 value的值来确定，用v-model双向数据绑定来实现 - checkbox多选的默认选项
- 默认选项采用 value的值来确定，需要在后面加 multiple，用v-model双向数据绑定来实现，不同的是在data数据域中，用数组选定value的值
- select
- textarea
<script type="text/javascript">
window.onload = function () {
const vm = new Vue({
el:'#app',
data:{
uname:'lisi',
gender: 2, 选定2，则代表默认选项是女，选则1则默认男
hobby:['1','2'],
desc:'窗前明月光',
occuption:['2','3']
},
methods:{
}
})
}
</script>
</head>
<body>
<div id="app">
<form action="#">
<div>
<span>姓名：</span>
<span>
<input type="text" v-model="uname">
</span>
</div>
<div>
<span>性别：</span>
<span>
<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender">
<label for="female">女</label>
</span>
</div>
<div>
<span>爱好：</span>
<span>
<input type="checkbox" id="ball" value="1" v-model="hobby">
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model="hobby">
<label for="ball">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="hobby">
<label for="code">写代码</label>
</span>
</div>
<div>
<span>职业：</span>
<select v-model="occuption" multiple> multiple表示多选，默认选项是data数据域中occuption所选的代表下面职业的value值
<option value="1">请选择职业:</option>
<option value="2">教师</option>
<option value="3">软件工程师</option>
<option value="4">律师</option>
</select>
</div>
<div>
<span>个人简介</span>
<textarea v-model="desc"></textarea> 表示默认显示data数据域中desc表示的文字
</div>
</form>
</div>
</body>
结果：
二、表单域修饰符
1：number
- 添加一个修饰符 number 给 v-model 来处理输入值：
<script type="text/javascript">
window.onload = function () {
const vm = new Vue({
el:'#app',
data:{
message:" "
},
methods:{
handel(){
alert(this.message + 10);
}
}
})
}
</script>
</head>
<body>
<div id="app">
<form>
<input type="text " v-model.number="message"> 将输入的字符串变为数值相加
<input type="submit" value="添加" @click="handel">
</form>
</div>
</body>
2：trim
- 要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<script type="text/javascript">
window.onload = function () {
const vm = new Vue({
el:'#app',
data:{
message:""
},
methods:{
handel(){
alert(this.message.length);
}
}
})
}
</script>
</head>
<body>
<div id="app">
<form>
<input type="text " v-model.trim="message"> trim后在输入框中输入空格后，空格被忽视
<input type="submit" value="添加" @click="handel">
</form>
</div>
</body>
3：lazy
- 在 “change” 而不是 “input” 事件中更新，在失去焦点的瞬间，实现同步
<script type="text/javascript">
window.onload = function () {
const vm = new Vue({
el:'#app',
data:{
message:""
},
methods:{
handel(){
alert(this.message.length);
}
}
})
}
</script>
</head>
<body>
<div id="app">
<form>
<input type="text " v-model.lazy="message">
{{message}}
</form>
</div>
</body>
结果：
失去焦点后：
