社区精选｜在 Vue 中控制表单输入

业界作者：SegmentFault 2023-04-12 17:42:56

今天小编为大家带来的是社区作者 chuck 的文章，让我们一起来学习 Vue。

Vue 中 v-model 的思路很简单。定义一个可响应式的 text（通常是一个 ref），然后用 v-model="text"将这个值绑定到一个 input 上。这就创造了一个双向的数据流：

用户在输入框中输入，text 会发生变化。
text 发生变化，输入框的值也随之变化。

让我们看看如何在 Vue 3 中使用 v-model 来控制表单输入。

绑定表单输入

让我们实现一个组件，渲染一个初始值为 Unknown 的输入表单。用户在输入表单中引入的值会在屏幕上渲染出来。

v-model 很适合实现这样一个组件。将 v-model 与输入表单连接起来需要两个简单的步骤：

const text = ref()：作为 v-model 可响应式的值。
v-model="text"：将 v-model 添加到分配有 text 的输入表单标签中。

<script setup>
import { ref } from 'vue'
const text = ref('Unknown') // Step 1: create data bus
</script>
<template>
  <!-- Step 2: assign data bus to v-model -->
  <input v-model="text" type="input" />
  <div>{{ text }}</div>
</template>

输入表单包含初始值 Unknown。在输入表单里输入一些东西：输入值和屏幕上的文本都会更新。

v-model="text" 在 Vue 中属于双向绑定数据。

第一个方向的流动发生在初始化过程中。输入值被初始化为 Unknown，也就是 text 的初始值。

第二个方向的流动发生在给输入表单键入值的时候。v-model 接受输入框的值，并用它来更新 text。

v-model与v-bind

在 Vue 中，v-bind 是另一种数据绑定机制：

<input v-bind:value="text" type="text" />

可以简写为：

<input :value="text" type="text" />

v-model 和:value 的不同之处是什么？<input :value="value" />是一种单向数据流机制。

为了理解两者的不同之处，让我们将先前的例子从 v-model="text"改为:value="text"：

<script setup>
import { ref } from 'vue'
const text = ref('Unknown')
</script>
<template>
  <input :value="text" type="input" />
  <div>{{ text }}</div>
</template>

输入表单的初始值为 Unknown。

在输入表单中键入一些字符，然而…屏幕上渲染的文本依旧是Unknown。

:value="text"让数据流仅仅单向流动：从 text 流向输入表单。当改变数据表单的值时，并不会改变 text。

总之，v-model 实现了双向数据流，而:value 实现了单向数据流。

模拟 v-model

尽管两者有差异，但是 v-model 可以使用:value 和@input 进行模拟：

<input v-model="text" type="text" />

也可以表示为：

<input :value="text" type="text" />

下面的代码没有使用 v-model，但双向数据流仍然生效：

<script setup>
import { ref } from 'vue'
const text = ref('Unknown')
</script>
<template>
  <input 
    :value="text" 
    @input="text = $event.target.value" 
    type="input" 
  />
  <div>{{ text }}</div>
</template>

常规绑定:value="text"开启了第一个流程。

当用户在输入表单中输入时会触发@input="text = $event.target.value"，从而更新 text。这就是第二个流程。

使用 reactive()绑定

reactive()是 Vue 里的响应式 API，可以让对象具有响应式。

ref()和 reactive()的最大不同点就是，ref()可以存储原始值和对象，而 reactive()值接受对象。并且 reactive()对象可以直接访问，而不需要像 ref()那样需要通过.value 属性访问。

让我们实现一个具有姓氏和名字的输入表单，并将这些绑定到一个响应式对象的属性上：

<script setup>
import { reactive } from 'vue'
const person = reactive({ firstName: 'John', lastName: 'Smith' })
</script>
<template>
  <input v-model="person.firstName" type="input" />
  <input v-model="person.lastName" type="input" />
  <div>Full name is {{ person.firstName }} {{ person.lastName }}</div>
</template>

const person = reactive({ firstName: '', lastName: '' })创建了一个响应式的对象。

v-model="person.firstName"与名字属性绑定，以及 v-model="person.lastName"与姓氏属性绑定。

一个响应式对象的属性可以作为 v-model 的数据总线。可以使用这种方法来绑定许多输入表单。

绑定不同输入类型

许多其他的输入类型比如说 select、textarea、checkbox、radio 都可以使用 v-model 绑定。让我们来试试吧。

Textarea

为 textarea 绑定一个 ref 是非常直截了当的。只需要在 textarea 标签上使用 v-model 即可：

<script setup>
import { ref } from 'vue'
const longText = ref("Well... here's my story. One morning...")
</script>
<template>
  <textarea v-model="longText" />
  <div>{{ longText }}</div>
</template>

Select

select 也就是下拉框，为用户提供了一组预定义的选项供其选择。

绑定下拉框也是非常简单的：

<script setup>
import { ref } from 'vue'
const employeeId = ref('2')
</script>
<template>
  <select v-model="employeeId">
    <option value="1">Jane Doe</option>
    <option value="2">John Doe</option>
    <option value="3">John Smith</option>
  </select>
  <div>Selected id: {{ employeeId }}</div>
</template>

employeeId 是与 select 绑定的 ref，将获得被选择的选项的值。

因为 employeeId 被初始化为'2'，因此 John Doe 选项会被选中。

当你选择另一个选项时，你可以看到 employeeId 以新选择的选项值进行更新。

如果 select 的选项没有 value 属性，那么就用选项的文本值进行绑定：

<script setup>
import { ref } from 'vue'
const employee = ref('Jane Doe')
</script>
<template>
  <select v-model="employee">
    <option>Jane Doe</option>
    <option>John Doe</option>
    <option>John Smith</option>
  </select>
  <div>Selected: {{ employee }}</div>
</template>

现在，绑定直接与选项的文本值共同生效。如果你选择了第二个选项，那么 employee 将被分配为"John Doe"。

Checkbox

感谢 v-model 让绑定复选框很容易：

<input ref="checked" type="checkbox" />

checked 被赋予一个布尔值，表示该复选框是否被选中。

让我们创建一个复选框，并绑定 checked：

<script setup>

import { ref } from 'vue'

const checked = ref(true)

</script>

<template>

  <label><input v-model="checked" type="checkbox" />Want a pizza?</label>

  <div>{{ checked }}</div>

</template>

checked 的初始值是 true，因此复选框默认是被选中的。勾选或不勾选复选框，会相应地将 checked 更新为 true 或 false。

为了将勾选或不勾选绑定到布尔值以外的其他自定义值，Vue 在复选框上提供了 2 个 Vue 特有的属性：

<input 
  v-model="checked" 
  true-value="Yes!" 
  false-value="No" 
/>

现在，checked 被赋值为'Yes!'或'No'字符串，这取决于复选框的状态。

让我们使用自定义值'Yes!'和'No'来修改先前的例子：

<script setup>
import { ref } from 'vue'
const answer = ref('Yes!')
</script>
<template>
  <label>
    <input v-model="answer" type="checkbox" true-value="Yes!" false-value="No"  />
    Want a pizza?
  </label>
  <div>{{ answer }}</div>
</template>

现在，answer 是'Yes!'或'No'取决于复选框的选中状态。

Radio

要绑定一组单选按钮，要对该单选组应用相同的总线绑定 v-model="option"：

<input type="radio" v-model="option" value="a" />
<input type="radio" v-model="option" value="b" />
<input type="radio" v-model="option" value="c" />

举个例子，让我们实现一组单选按钮，来选择 T 恤的颜色：

<script setup>
import { ref } from "vue"
const color = ref("white")
</script>
<template>
  <label><input type="radio" v-model="color" value="white" />White</label>
  <label><input type="radio" v-model="color" value="red" />Red</label>
  <label><input type="radio" v-model="color" value="blue" />Blue</label>
  <div>T-shirt color: {{ color }}</div>
</template>

初始情况下，White 单选框会被选中，因为 color 的初始值为'white'。

点击其他任意 T 恤颜色，并根据选定的颜色改变 color。

单选框的 value 属性是可绑定的：你可以使用:value。当选项列表来自一个数组时这很有帮助：

<script setup>
import { ref } from "vue"
const color = ref("white")
const COLORS = [
  { option: "white", label: "White" },
  { option: "black", label: "Black" },
  { option: "blue", label: "Blue" },
]
</script>
<template>
  <label v-for="{ option, label } in COLORS" :key="option">
    <input type="radio" v-model="color" :value="option" /> {{ label }}
  </label>
  <div>T-shirt color: {{ color }}</div>
</template>

v-model 修饰符

除了在绑定表单输入方面做得很好之外，v-model 还有一个额外的功能，叫做修饰符。

修饰符是应用于 v-model 的一段逻辑，用于自定义其行为。修饰符通过使用点语法 v-model.<modifier>应用于 v-model，例如 v-mode.trim。

默认情况下，Vue 提供了 3 个修饰符，trim、number 和 lazy。

trim

清除一个字符串是指删除字符串开头和结尾的空白处。例如，清除应用于' Wow! '的结果是'Wow!'。

v-model.trim 修饰符在赋值给绑定的 ref 之前清除输入表单的值：

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>
<template>
  <input v-model.trim="text" type="text" />
  <pre>"{{ text }}"</pre>
</template>

number

v-model.number 修饰符在输入表单的值上应用一个数字解析器。

如果用户引入了一个可以解析为数字的值，v-model.number="number"则将解析后的数字分配给 number。在其他情况下，如果引入的值不是数字，number 就会被分配为原始字符串。

<script setup>
import { ref } from "vue";
const number = ref("");
</script>
<template>
  <input v-model.number="number" type="text" />
  <div>{{ typeof number }}</div>
</template>

当你在 input 中引入'345'，那么 number 就会变成 345（一个数字）。值解析会自动发生。

但是如果你在 input 中引入一个非数值，比如'abc'，那么 number 就会被分配为相同的值'abc'。

lazy

默认情况下，当绑定的值更新时，v-model 会使用 input 事件。但如果使用修饰符 v-model.lazy，你可以将该事件改为 change 事件。

input 和 change 事件的主要区别是什么呢？

input 是每当你在输入表单键入时就会触发。
change 是只有当你把焦点从输入表单移开时，才会触发。在输入表单里输入并不会触发 change 事件。

下面示例使用了 lazy 绑定：

<script setup>
import { ref } from 'vue'
const text = ref('Unknown')
</script>
<template>
  <input v-model.lazy="text" type="input" />
  <div>{{ text }}</div>
</template>

如果你有一个许多输入字段和大量状态的表单，你可以应用 lazy 修饰符来禁用用户输入时的实时响应。这可以防止输入时页面卡住。

总结

v-model 将表单输入与 ref 或响应式对象进行绑定。

绑定是通过两个简单的步骤实现的：

首先，通过 const text = ref('')创建 ref。
其次，将 ref 分配给 v-model 属性：<input v-model="text" type="text" />。

以上就是本文的全部内容，如果对你有所帮助，欢迎点赞、收藏、转发~

点击左下角阅读原文，到 SegmentFault 思否社区 和文章作者展开更多互动和交流，“公众号后台“回复“ 入群 ”即可加入我们的技术交流群，收获更多的技术文章~

- END -

关注公众号：拾黑（shiheibook）了解更多

赞助链接：

关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/

*文章为作者独立观点，不代表 K2数据恢复大师立场

本文由 SegmentFault发表，转载此文章须经作者同意，并请附上出处( K2数据恢复大师 )及本页链接。

原文链接 https ://www.51uos.com/news/industry/6656.html

关注网络尖刀微信公众号
随时掌握互联网精彩