[Vue.js]学习笔记-Vue.js表单-修饰符

范范

[Vue.js]学习笔记-Vue.js表单-修饰符

导读部分

---

讨论区：http://www.sufeinet.com/forum-58-1.html

教程目录：http://www.sufeinet.com/thread-24026-1-1.html

教程部分

---

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

本次我们来学习Vue.js的表单处理， 就是页面上的表单元素。
我们通过v-model指令在表单控件元素上创建双向的数据绑定。

本次主要学习下Vue.js表单的修饰符， 修饰符主要有， .lazy， .number， .trim。

.lazy：
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

[HTML] 纯文本查看 复制代码

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

[HTML] 纯文本查看 复制代码

<input v-model.number="age" type="number">

.number 通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型


.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

[HTML] 纯文本查看 复制代码

<input v-model.trim="msg">

站长苏飞

我只是路过打酱油的。

liu

强烈支持楼主ing……

竹林风

强烈支持楼主ing……