day02笔记
1、Vue表单
-
Vue表单是双向数据绑定的!
-
核心指令: v-model
<标签控件 v-model="变量" />
-
单选框、密码框、多行文本框
<input type="text" v-model="变量" /> <input type="password" v-model="变量" /> <textarea v-model="变量"></textarea>
-
单选
<input type="radio" v-model="变量" value="值1" /> <input type="radio" v-model="变量" value="值2" /> <input type="radio" v-model="变量" value="值3" /> data:{ 变量:值2 // 值2的控件将会被选中 }
变量获取到的数据就是控件的value值,如果变量绑定的数据和控件的value值一致,那么该单选控件被选中
-
多选
<input type="checkbox" v-model="变量" value="值1" /> <input type="checkbox" v-model="变量" value="值2" /> <input type="checkbox" v-model="变量" value="值3" /> data:{ 变量:[值1] // 绑定的变量是一个数组! 值1的控件将会选中 }
多选,每个控件都需要有value值,且 绑定的变量是一个数组
-
勾选
<input type="checkbox" v-model="变量" /> data:{ 变量:布尔值 }
-
下拉列表
<select v-model="变量"> <option value="值1">111</option> <option value="值2">222</option> <option value="值3">333</option> </select> data:{ 变量:值2 // 值2的option控件被选中 }
每个option标签都要有value值
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02、Vue表单</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <p>姓名:<input type="text" v-model="userinfo.username" >{ {userinfo.username}}</p> <p>密码:<input type="password" v-model="userinfo.password">{ {userinfo.password}}</p> <p> 性别: <!-- 作为单选控件的时候,需要给每个控件一个 value值! --> <label><input type="radio" value="1" v-model="userinfo.sex">男</label> <label><input type="radio" value="0" v-model="userinfo.sex">女</label> { {userinfo.sex}}