vue v-model使用说明
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">
vue v-model使用说明的更多相关文章
- [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as for ...
- django 与 Vue 的结合使用说明
1.第一步有一个Django项目 先是创建一个Django项目 django-admin startproject demo 然后创建一个application应用 python manage.py ...
- vue之v-for使用说明
demo.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
- vue之 :model和v-model的区别
v-model通常用于input的双向数据绑定 <input v-model="parentMsg">,也可以实现子组件到父组件数据的双向数据绑定 :model是v-b ...
- AntDesign VUE:Model组件的Button的事件this指向undefined的问题(箭头函数)
问题 一个很简单的this指向问题引起的报错: 记录下来主要是想看看这玩意到底指向哪里: 真不戳 解决方法 ES6的箭头函数,有人理解它就是没有this指向,我个人理解是它的this指向函数体的上一级 ...
- 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问
中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
- vue实现对表格数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- 如何用vue实现树形菜单?
在公司培训了2周,布置的作业是从树形,grid分页以及echarts中选一个.由于都不是很熟,就挑了第一个.本来想在网上找找参考,然后模仿着做一个,但是网上的代码多少参差不齐,写到一半没了,所以只要自 ...
随机推荐
- 用最优方法从LinkedList列表中删除重复元素
用运行速度最优的方法从LinkedList列表里删除重复的元素,例如A->B->BB->B->C,返回A->B->BB->C. 考试的时候没完全想明白,考完又 ...
- windows系统——U 盘损坏修复
u盘损坏怎么修复 1.打开控制面板——管理工具——计算机管理——存储——磁盘管理——右击“磁盘1”——点击“初始化磁盘”——“确定”——初始化完毕后,U盘为“联机”状态. 2.在右边空白处“新建磁盘分 ...
- bzoj2338数矩形(rectangle)
数矩形(rectangle) 计算几何 把所有点两两连线,把这些线按长度排序,再按中点排序 能组成矩形的线一定是连续的 最坏就是所有点围成一个圆,交于圆心 复杂度O(可以过) 要用叉积,不然会被卡精 ...
- Codeforces Round #316 (Div. 2) A 水
A. Elections time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- web服务之http
HTTP协议 HTTP协议,全称HyperText Transfer Protocol即超文本传输协议,是互联网中最常用的一种网络协议.HTTP协议是互联网上的通信协议方案之一.它有很多的应用, 但最 ...
- Dictionary To Dynamic
原文发布时间为:2012-12-25 -- 来源于本人的百度文章 [由搬家工具导入] public static class DictionaryExt { /// <sum ...
- 教你怎么使用Windows7系统自带的备份与还原的方法
原文发布时间为:2010-09-09 -- 来源于本人的百度文章 [由搬家工具导入] 继续单击“下一步”按钮,在其后界面中检查上述备份设置是否正确,如果不正确的话可以直接单击“取消”按钮,重新设置备份 ...
- js判断手机的左右滑动
js代码 $(function() { function judge() { var startx;//让startx在touch事件函数里是全局性变量. var endx; var el = doc ...
- 【Visual Studio】“rc.exe”已退出,代码为 5 ("rc.exe" exited with code 5.)
[解决方案]找到 rc.exe 所在目录,然后 方法1:添加该目录到 VC++ Directories --> Executable Directories中 方法2:添加到系统变量中的Path ...
- 广州地区常用的DNS解析服务器
广州电信DNS: 首选:202.96.128.143 备用:202.96.128.68 首选:202.96.134.133 备用:202.96.128.166 首选:61.144.56.100备用:6 ...