vue v-model使用说明
2024-09-29 16:47:24
1、概述
v-model
会忽略所有表单元素的 value
、checked
、selected
特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data
选项中声明初始值。
2、值绑定
对于单选按钮,复选框及选择框的选项,v-model
绑定的值通常是静态字符串 (对于复选框也可以是布尔值):
<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle"> <!-- 当选中第一个选项时,`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
3、修饰符
(1)lazy
在默认情况下,v-model
在每次 input
事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy
修饰符,从而转变为使用 change
事件进行同步:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
(2)trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model
添加 trim
修饰符:
<input v-model.trim="msg">
最新文章
- 《深入理解Java虚拟机》虚拟机性能监控与故障处理工具
- mysql索引总结----mysql 索引类型以及创建
- C/C++中的声明与定义
- USACO1.5Superprime Rid[附带关于素数算法时间测试]
- (转载)IOS中UIScrollView的属性和委托方法
- js-事件、正则表达式
- 微信公众号开发第二课 百度BAE搭建和数据库使用
- JS把函数当作参数传递
- jsp页面元素和内置对象
- nginx如何实现404状态返回 200隐藏URL
- 李洪强iOS开发之【零基础学习iOS开发】【02-C语言】08-基本运算
- Python 爬虫入门(requests)
- 关于 <;video>; 的兼容性测试
- JS原生Ajax&;Jquery的Ajax技术&;Json
- 在网页中使用particlesjs实现背景的动态粒子特效
- vue.js 添加 fastclick的支持
- python -- 内置模块02
- tp5框架中jquery+ajax分页
- pip 国内源 配置
- ZOJ 2112 Dynamic Rankings(树状数组+主席树)