在 Vue 中控制表单输入

text（通常是一个ref），然后用v-model="text"将这个值绑定到一个input上。这就创造了一个双向的数据流：

text

text发生变化，输入框的值也随之变化。

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

<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" @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(绑定
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。
<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'。
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。

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

以上就是本文的全部内容，如果对你有所帮助，欢迎点赞、收藏、转发~
            声明：本文由用户投稿上传，本站不保证内容的真实与正确性，并且不承担相关法律责任，如有侵权请提供版权资料并联系删除！
            
                编程笔记
                »
                在 Vue 中控制表单输入
            
            
                
                    赞同 (33)
                
                or
                
                    
                    分享 (0)

在 Vue 中控制表单输入

绑定表单输入

v-model与v-bind

模拟v-model

使用reactive(绑定

绑定不同输入类型

Textarea

Select

Checkbox

Radio

v-model修饰符

trim

number

lazy

总结

相关文章

Hi，您需要填写昵称和邮箱！