-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Xicheng Guo
committed
Jul 23, 2024
1 parent
ac205ff
commit 61c0fef
Showing
4 changed files
with
105 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
# 修饰符 | ||
|
||
## .lazy | ||
|
||
`v-model` 默认会在每次 `input` 事件触发后同步数据,可以添加 `lazy` 修饰符,从而转变为在 `change` 事件触发后同步数据。 | ||
|
||
<<< @/../projects/vue-sandbox/src/components/Form/Modifier.vue#lazy | ||
|
||
## .number | ||
|
||
`v-model` 默认会将输入的值转换为字符串,可以添加 `number` 修饰符,从而将输入的值转换为数字。 | ||
|
||
::: details | ||
|
||
- 如果输入的值无法被`parseFloat`解析为数字,那么将返回原始值。 | ||
- `number` 修饰符会在输入框有 `type="number"` 时自动生效。 | ||
|
||
::: | ||
|
||
<<< @/../projects/vue-sandbox/src/components/Form/Modifier.vue#number | ||
|
||
## .trim | ||
|
||
`v-model` 默认会保留输入的值的前后空格,可以添加 `trim` 修饰符,从而去除输入的值的前后空格。 | ||
|
||
<<< @/../projects/vue-sandbox/src/components/Form/Modifier.vue#trim |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
# 双向绑定 | ||
|
||
## 什么是双向绑定 | ||
|
||
在前端处理表单时,常常需要将表单输入的内容同步给 Javascript 变量,或者将 Javascript 变量的值同步给表单输入。这种双向的数据同步,就是双向绑定。 | ||
|
||
::: warning | ||
|
||
- `v-model` 只能用在表单元素上。 | ||
- `v-model` 会忽略所有表单元素的 `value`、`checked`、`selected` 特性的初始值,而总是将 `Vue 实例`的数据作为数据来源。 | ||
- `v-model` 会根据所使用的元素自动使用对应的 DOM 属性和事件组合: | ||
- `<input>` 和 `<textarea>` 元素绑定 `value` 属性并监听 `input` 事件; | ||
- `checkbox` 和 `radio` 绑定 `checked` 属性并监听 `change` 事件; | ||
- `<select>` 绑定 `value` 属性并监听 `change` 事件。 | ||
|
||
::: | ||
|
||
## 文本框 | ||
|
||
<<< @/../projects/vue-sandbox/src/components/Form/TextBox.vue | ||
|
||
## 复选框 | ||
|
||
::: code-group | ||
|
||
<<< @/../projects/vue-sandbox/src/components/Form/CheckBox.vue [基本用法] | ||
|
||
<<< @/../projects/vue-sandbox/src/components/Form/CheckBoxValueBind.vue [值绑定] | ||
|
||
::: | ||
|
||
## 单选框 | ||
|
||
::: code-group | ||
|
||
<<< @/../projects/vue-sandbox/src/components/Form/RadioBtn.vue [基本用法] | ||
|
||
<<< @/../projects/vue-sandbox/src/components/Form/RadioBtnValueBind.vue [值绑定] | ||
|
||
::: | ||
|
||
## 下拉选框 | ||
|
||
::: details | ||
如果 `v-model` 表达式的初始值不匹配任何一个选择项,`<select>` 元素会渲染成一个“未选择”的状态。在 iOS 上,这将导致用户无法选择第一项,因为 iOS 在这种情况下不会触发一个 change 事件。因此,建议提供一个空值的禁用选项。 | ||
::: | ||
|
||
::: code-group | ||
|
||
<<< @/../projects/vue-sandbox/src/components/Form/Selector.vue [基本用法] | ||
|
||
<<< @/../projects/vue-sandbox/src/components/Form/SelectorValueBind.vue [值绑定] | ||
|
||
::: |