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

表单输入绑定

  1. 文本框(包含多行),使用 v-model 指令可以及时渲染更新内容;
<input type="text" placeholder="请输入内容" v-model="message">
<div>内容:{{message}}</div>
  1. 单个复选框,可以直接绑定布尔值 true 和 false,自动识别是否勾选;
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>

const dataObj = {
checked : false,
};
  1. 多个复选框,可以通过绑定实现选择获取信息;
<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 : []
};
  1. 单选按钮,绑定后和复选框实现一样的效果;
<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 : '男'
};
  1. 下拉选择框,分单选和多选,基本同上;
<select v-model="selected">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
已选:{{selected}}

const dataObj = {
selected : ''
};

PS:如果是多选,selected : []

上一篇:面试题28. 对称的二叉树


下一篇:idea安装maven helper出现的问题