表单输入绑定
- 文本框(包含多行),使用 v-model 指令可以及时渲染更新内容;
<input type="text" placeholder="请输入内容" v-model="message">
<div>内容:{{message}}</div>
- 单个复选框,可以直接绑定布尔值 true 和 false,自动识别是否勾选;
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
const dataObj = {
checked : false,
};
- 多个复选框,可以通过绑定实现选择获取信息;
<input type="checkbox" id="a" value="Mr.Lee" v-model="checkedNames">
<label for="a">Mr.Lee</label>
<input type="checkbox" id="b" value="Mr.Wang" v-model="checkedNames">
<label for="b">Mr.Wang</label>
<input type="checkbox" id="c" value="Mr.Zhang" v-model="checkedNames">
<label for="c">Mr.Zhang</label>
人员:{{checkedNames}}
const dataObj = {
checkedNames : []
};
- 单选按钮,绑定后和复选框实现一样的效果;
<input type="radio" id="one" value="男" v-model="gender">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="gender">
<label for="two">女</label>
性别:{{gender}}
const dataObj = {
gender : '男'
};
- 下拉选择框,分单选和多选,基本同上;
<select v-model="selected">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
已选:{{selected}}
const dataObj = {
selected : ''
};
PS:如果是多选,selected : []