学习VUE第六天课程（补充——VUE之表单与v-model）

谁借莪１个温暖的怀抱￠ 2023-06-08 03:11 89阅读 0赞

# VUE之表单与v-model #

## 大纲 ##

**（1）v-model基本用法  
（2）单选框/按钮  
（3）复选框/多选按钮  
（4）下拉选择列表  
（5）表单输入绑定修饰符**

### v-model基本用法 ###

*  表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。 Vue 提供了 v-model 指令，用于在表单类元素上双向绑定数据。  
    **例如在输入框上使用时，输入的内容会实时映射到绑定的数据上**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]  
    **在输入框输入的同时，｛ \{ message \} ｝也会实时将内容渲染在视图中。**
 *  **对于文本域 textarea 也是同样的用法**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

## 注意： ##

**①使用 v-model 后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的 value属性（解耦初始化value属性）**  
![在这里插入图片描述][20191015194817170.png]  
**②对于< textarea> 之间插入的值，不会生效（覆盖文本域）**  
![在这里插入图片描述][20191015194832652.png]  
**③使用 v-model 时，如果是用中文输入法输入中文，一般在没有选定饲组前，也就是在拼音阶段， Vue 是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以用＠input 来替代 v-model ，只不过v-model会在不同的表单上进行智能处理。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]  
**案例分析：  
此时没有v-model指令，所以默认初始值可以正常显示，不会被覆盖。**

# 单选框/按钮 #

## （1）单独使用 ##

**单选按钮在单独使用时，官方文档标明不需要 v-model ，可以直接使用 v-bind 绑定布尔类型为真选中，为否时不选。**  
**但不推荐使用v-bind进行绑定-——————————建议用 v-model 配合 value使用。**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

#### （2）组合使用 ####

**如果是组合使用来实现互斥选择效果。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]  
**数据 profession值与单选按钮的 value 值一致时，就会选中该项。**

# 复选框/多选按钮 #

**复选框也分单独使用和组合使用，不过用法稍与单选不同。**

### （1）单独使用 ###

**复选框单独使用时，是用 v-model来绑定一个布尔值。（注意：虽然v-bind绑定后的效果也一样，但只是效果一样，数据并未发生改动）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

**因为v-bind绑定单个多选按钮无法实现数据驱动，所以单独使用复选框时，语法指令为v-model**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]

## 对上面案例进行修改调整 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]  
**此时在勾选时，数据status值变为了true, label 渲染的内容也会更新。**

### （2）组合使用 ###

**组合使用时，也是v-model与value 一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选中这一项。这一过程是双向的，在勾选时value 的值也会自动 push这个数组中，示例代码如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]

# Vue实现全选与全不选1 #

**利用vue的双向数据绑定v-model命令，当勾选时，checkbox的value值会自动push到所绑定的数组checkData中去，即结合value和v-model。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][20191015195347367.png]

# Vue实现全选与全不选2 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][20191015195459503.png]

# 下拉选择列表 #

**选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。**

## 单选： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]

### 多选： ###

**给添加属性 multiple 就可以多选了， 此时v-model 绑定的是一个数组。与复选框用法类似，多选：按住Ctrl+点击即可。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]

# 动态下拉选择列表 #

**在业务中，经常用 v-for 动态输出，value和text 也是用 v-bind 来动态输出的。例如：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]  
**虽然用选择列表控件可以很简单地完成下拉选择的需求，但是在实际业务中反而不常用。  
因为它的样式依赖平台和浏览器，无法统一，不太美观，功能受限，如不支持搜索。  
常见的解决方案是用 div或ul 模拟个类似的控件。**

# 表单输入绑定修饰符 #

### （1）.lazy延迟修饰符 ###

**在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]

### （2）.number数字修饰符 ###

**这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]

### （3）过滤空白修饰符 ###

**给 v-model 添加 trim 修饰符，可以自动过滤用户输入的首尾空白字符**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 17]

#### 以上为补充的资料 ####

### 如有疑问或者问题请留言联系小编！！！！！！ ###

### 感谢来访！！！！ ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/4a682d05b32a46e4bff10a6c403fe8d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/e60c76b20d3840728c92b4adfd119a1c.png
[20191015194817170.png]: /images/20230531/210cfd41620d48ec97cc388fb6714980.png
[20191015194832652.png]: /images/20230531/c188b7c403474e37bfcacdd828cb2094.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/f4f881304a9c4da78ed77d2b6ea8a3b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/323dfd75d327457aba3a5222b4b6a38e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230531/778ccb565f214024a56184824e468e38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230531/95489a7aff624de48daa293db0e2ef98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: /images/20230531/adf2cf52b3e14a6ea1f3cd4371969140.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: /images/20230531/b00151d6aef44420bc18f9ea6b71754a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: /images/20230531/9c7baaf070824a3883e4c7cab9631ff2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]: /images/20230531/0dea4087ef514a9d810b79fe24309946.png
[20191015195347367.png]: /images/20230531/24fb1c0f60cf4bb7877866df01e2b868.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]: /images/20230531/eced526f71334026a94c4f33b4850427.png
[20191015195459503.png]: /images/20230531/732be625cda54c4d98bd5970c4d5dcf2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]: /images/20230531/4fa8937ccc3b4708bbcac395c4c5c2fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]: /images/20230531/d84beed171d84c358e4ef97e7c660a48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]: /images/20230531/d3966f5891ec4d578a4f9c07df76fa0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]: /images/20230531/7670446551864c7aabdcb3abb957d2a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]: /images/20230531/9e881ecdaef54dc2964ca6912c3ae47a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 16]: /images/20230531/cab4198bf76640608c045e1148906edf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 17]: /images/20230531/304030b1783e444d844f476b27e244c2.png