关于vue.js:在-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。

在 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 能够应用 :value 和@input进行模仿：

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

也能够示意为：

<input :value="text" @input="text = $event.target.value" 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()是 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 绑定一个 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也就是下拉框，为用户提供了一组预约义的选项供其抉择。

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

<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"。

感激 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'取决于复选框的选中状态。

要绑定一组单选按钮，要对该单选组利用雷同的总线绑定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.<modifier> 利用于v-model，例如v-mode.trim。

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

革除一个字符串是指删除字符串结尾和结尾的空白处。例如，革除利用于 '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>

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'。

默认状况下，当绑定的值更新时，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" />。

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

关于vue.js:在-Vue-中控制表单输入

绑定表单输出

v-model 与 v -bind

模仿 v -model

应用 reactive()绑定

绑定不同输出类型

Textarea

Select

Checkbox

Radio

v-model 修饰符

trim

number

lazy

总结