查看“Vue从入门到实战:单行文本输入框”的源代码
←
Vue从入门到实战:单行文本输入框
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==基础用法== 你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 *v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 <nowiki><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id = "app"> <input type="text" v-model="message" value="Hello Vue.js"> <p>message:{{message}}</p> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { message: 'Vue.js无难事' } }); </script> </body> </html></nowiki> v-model指令提供了一个trim修饰符,可以帮我们自动过滤输入数据首尾的空白字符 <nowiki><input type="text" v-model.trim="message" value="Hello Vue.js"></nowiki> 除了trim修饰符外,v-model还可以使用如下修饰符: .lazy 默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步,如果使用了该修饰符,则会转变为使用change事件进行同步 .number 如果想自动将用户的输入数据转为数值类型,可以给v-model添加number修饰符。
返回至
Vue从入门到实战:单行文本输入框
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息