- Vue.js企业开发实战
- 千锋教育高教产品研发部编著
- 742字
- 2022-07-28 19:42:47
2.5 表单输入绑定
2.5.1 双向绑定
MVVM模式最重要的一个特性就是双向绑定,而Vue作为一个MVVM框架,也实现了数据的双向绑定。在Vue中使用内置的v-model指令完成数据在View与Model间的双向绑定。
v-model会忽略所有表单元素的value、checked、selected attribute的初始值而将Vue实例的数据作为数据来源,因此应该通过JavaScript在组件的data选项中声明初始值。
2.5.2 v-model基本用法
当v-model使用在不同的表单元素上时,保存值的类型也是不同的,常见的表单元素数据绑定操作如下。
1.文本输入框
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P61_26602.jpg?sign=1734478461-fF0Cw8acHdLMfec2En9YVTyBVlWwWy0X-0-06cf7fa0ce44b0f60b265e78fd3ba409)
在浏览器中运行的效果如图2.41所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P61_6941.jpg?sign=1734478461-rpFQt5jMrKjJ1IQ5izfjZRAUtoehgzr2-0-661ec531f87c3753c5eae5933451a5c8)
图2.41 绑定文本输入框
2.文本域
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P61_26603.jpg?sign=1734478461-QPb2n7iwdYwa6ttaozB8eOGWVoc1ox4e-0-eb1b96d5801798671196ad311d3380ad)
在浏览器中运行的效果如图2.42所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P61_7001.jpg?sign=1734478461-mR8VREw0I15u0El2UP2KMqWk6Nvbt8xD-0-89d126d0a6806b8eff048d8d7994e4a4)
图2.42 绑定文本域
3.复选框
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P62_26604.jpg?sign=1734478461-yfBPEG8VVOfU8fge6mzzfINvju2yRdsg-0-78b3dfd457fbc69a260371cfad6b4b48)
在浏览器中运行的效果如图2.43所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P62_7088.jpg?sign=1734478461-LgV2Y7qdANboGQjYm0k0f7CbhvV2rmgJ-0-46473182117b262f6ab705b976cac52f)
图2.43 绑定复选框
4.单选按钮
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P62_26605.jpg?sign=1734478461-lfUNL1bmPOttyoytGvnmszWHSXkIUKBh-0-b332472c77a009a6c96d9ca82c374a83)
在浏览器中运行的效果如图2.44所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P63_7189.jpg?sign=1734478461-htorl9tRs0ckDl1Fk9Caiyou5TZ2bgNm-0-ba6aa59e1cd38503797443781d9d55f8)
图2.44 绑定单选按钮
5.下拉选择框
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P63_26606.jpg?sign=1734478461-j7JALY7Sm4HUYfC77vJVJnnvB3N4WTKe-0-08fc4854a9c78d37648c9d1c54e30c8d)
在浏览器中运行的效果如图2.45所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P63_7286.jpg?sign=1734478461-UwLofnuAGfSwrNf6SVa1SNh5fVPobxSE-0-cb4bb80f8acf1a781d16abd0541c5ff4)
图2.45 绑定下拉选择框
2.5.3 修饰符
对于v-model指令,有3种常用的修饰符。
· lazy
· number
· trim
1.lazy修饰符
在输入框中,v-model默认为同步数据,使用lazy修饰符后会转变为在change事件中同步,即当输入框失去焦点时数据才会更新。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P64_26607.jpg?sign=1734478461-1e4ByCku4cI5NZkQxY54L2DPxLVNt9WA-0-86fe782c4e7b16c7700ec011a6fb5d87)
在浏览器中运行,当输入内容时不会同步更新,如图2.46所示。当输入框失去焦点时,数据才会被更新,如图2.47所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P64_7355.jpg?sign=1734478461-8xC4lIqvoJ9i25QP89sg8MaJf7vbT4vy-0-68def44cb9eb48468a163b1d0ed8c6a9)
图2.46 输入数据
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P64_7358.jpg?sign=1734478461-26IZ4UoEBWNvE25ZrrjZ3SvczkKprG3i-0-3c54ce20c5c6b74bf1decb1269c64c48)
图2.47 失去焦点时才更新数据
2.number修饰符
输入框默认输入的值为String类型,使用number修饰符可以将输入的值转化为Number类型,该修饰符经常使用在数字输入框中。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P64_26608.jpg?sign=1734478461-BFEbyugBVUuxdV35GKkyrBQBUS4YlEE6-0-4e989d4983bba7f117d3e5190f409395)
在浏览器中运行,输入框的默认值为String类型,如图2.48所示。当输入数字时,值的类型会被转化为Number类型,如图2.49所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P65_7433.jpg?sign=1734478461-jZotGXMCWEyj5m6Y5gJOtoBJw5kmxcOd-0-b20d894caabc5406f1f452020920c016)
图2.48 输入框的默认值类型
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P65_7436.jpg?sign=1734478461-pPMEIt4hCv7slBfZNlwaIDn8bR9HpeiK-0-a74b9a8b4b888d4765f6e27661333524)
图2.49 值的类型被转化为Number类型
3.trim修饰符
如果要自动过滤用户输入内容的首尾空格,可以给v-model添加trim修饰符。
index.html文件代码如下:
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P65_26610.jpg?sign=1734478461-TRA295rnLGnbuuVqRAUiDc0RhM0CiCu6-0-a5a8c970105d0ffcb8cf67f3ac05d816)
在浏览器中运行的效果如图2.50所示。
![](https://epubservercos.yuewen.com/85E887/23721628409520006/epubprivate/OEBPS/Images/Figure-P65_7492.jpg?sign=1734478461-rwZrLa6zJsIpGqtvruRgSOtbikCTaO0S-0-016567bc12808cc745ed9c69df66fc48)
图2.50 trim修饰符效果