08-VUE的列表获取

08-列表获取

---

收集表单数据：

​ 若：<input type=“text”>，则v-model收集的是value值，用户输入的就是value值。

账号：<input type="text" v-model="username"><br><br>
密码：<input type="password" v-model="password"><br><br>

​ 若：<input type:=“radio”>，则v-model收集的是value值，且要给标签配置value值。

性别：
男<input type="radio" name="gender" v-model="gender" value="male">
女<input type="radio" name="gender" v-model="gender" value="female">
<br><br>

​ 若：<input type=“checkbox”>
​ 1.没有配置input的value属性，那么默认收集的就是checked(勾选 or 未勾选，是布尔值)

<input type="checkbox" v-model="agree">
阅读并接受<a href="javascript:;">《用户协议》</a>
<br><br>

​ 2.配置input的value属性：
​ (1)v-model的初始值是非数组，那么收集的就是checked，框选一个勾选框会使得相关的勾选框一并被勾选上
​ (2)v-modell的初始值是数组，那么收集的的就是value组成的数组

爱好：
抽烟<input type="checkbox" v-model="hobby" value="smoke">
喝酒<input type="checkbox" v-model="hobby" value="drink">
烫头<input type="checkbox" v-model="hobby" value="Permhead">
<br><br>

备注：v-model的三个修饰符：
lazy:失去焦点再收集数据

当输入多行文本框时，VUE会频繁接收数值更改的数据，如果不希望如此频繁的获取数值改变，可以使用:lazy修饰符

其他信息：
<!-- v-model.lazy=""会在输入框失去焦点后在获取输入值 -->
<textarea cols="30" rows="10" v-model.lazy="other"></textarea>
<br><br>

​ number:输入字符串转为有效的数字

当需要输入年龄等倾向于数字类型的文本时，我们不仅可以将input的type属性设置成number，还可以添加:number修饰符，这样后台获取的输入框的值会为数字型且输入框不能输入除数字外的文本

<!-- v-model.number=""只会获取数字类型的输入 -->
年龄：<input type="number" v-model.number="age"><br><br>

​ trim:输入首尾空格过滤

用户输入密码用户名等文本输入框时可能会失误输入空格，我们可以添加:trim修饰符清空输入文本中的空格

<!-- v-model.trim="" 会自动去除输入的空格 -->
账号：<input type="text" v-model.trim="username"><br><br>