vue学习-10-表单输入绑定

表单输入绑定

1. 文本框(包含多行)，使用 v-model 指令可以及时渲染更新内容；

<input type="text" placeholder="请输入内容" v-model="message">
<div>内容：{{message}}</div>

2. 单个复选框，可以直接绑定布尔值 true 和 false，自动识别是否勾选；

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>

const dataObj = {
checked : false,
};

3. 多个复选框，可以通过绑定实现选择获取信息；

<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 : []
};

4. 单选按钮，绑定后和复选框实现一样的效果；

<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 : '男'
};

5. 下拉选择框，分单选和多选，基本同上；

<select v-model="selected">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
已选：{{selected}}

const dataObj = {
selected : ''
};

PS：如果是多选，selected : []

标签：10,vue,const,dataObj,绑定,表单,selected,Mr,复选框
来源： https://www.cnblogs.com/keacua/p/15268164.html