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

  1. 用户在输入框中输入,text会发生变化。
  2. text发生变化,输入框的值也随之变化。

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

绑定表单输入

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

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

  1. const text = ref():作为v-model可响应式的值。
  2. v-model="text":将v-model添加到分配有text的输入表单标签中。
  1. <script setup>
  2. import { ref } from 'vue'
  3. const text = ref('Unknown') // Step 1: create data bus
  4. </script>
  5. <template>
  6. <!-- Step 2: assign data bus to v-model -->
  7. <input v-model="text" type="input" />
  8. <div>{{ text }}</div>
  9. </template>

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

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

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

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

v-model与v-bind

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

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

可以简写为:

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

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

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

  1. <script setup>
  2. import { ref } from 'vue'
  3. const text = ref('Unknown')
  4. </script>
  5. <template>
  6. <input :value="text" type="input" />
  7. <div>{{ text }}</div>
  8. </template>

输入表单的初始值为Unknown

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

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

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

模拟v-model

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

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

也可以表示为:

  1. <input :value="text" @input="text = $event.target.value" type="text" />

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

  1. <script setup>
  2. import { ref } from 'vue'
  3. const text = ref('Unknown')
  4. </script>
  5. <template>
  6. <input
  7. :value="text"
  8. @input="text = $event.target.value"
  9. type="input"
  10. />
  11. <div>{{ text }}</div>
  12. </template>

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

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

使用reactive()绑定

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

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

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

  1. <script setup>
  2. import { reactive } from 'vue'
  3. const person = reactive({ firstName: 'John', lastName: 'Smith' })
  4. </script>
  5. <template>
  6. <input v-model="person.firstName" type="input" />
  7. <input v-model="person.lastName" type="input" />
  8. <div>Full name is {{ person.firstName }} {{ person.lastName }}</div>
  9. </template>

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

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

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

绑定不同输入类型

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

Textarea

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

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

Select

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

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

  1. <script setup>
  2. import { ref } from 'vue'
  3. const employeeId = ref('2')
  4. </script>
  5. <template>
  6. <select v-model="employeeId">
  7. <option value="1">Jane Doe</option>
  8. <option value="2">John Doe</option>
  9. <option value="3">John Smith</option>
  10. </select>
  11. <div>Selected id: {{ employeeId }}</div>
  12. </template>

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

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

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

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

  1. <script setup>
  2. import { ref } from 'vue'
  3. const employee = ref('Jane Doe')
  4. </script>
  5. <template>
  6. <select v-model="employee">
  7. <option>Jane Doe</option>
  8. <option>John Doe</option>
  9. <option>John Smith</option>
  10. </select>
  11. <div>Selected: {{ employee }}</div>
  12. </template>

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

Checkbox

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

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

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

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

  1. <script setup>
  2. import { ref } from 'vue'
  3. const checked = ref(true)
  4. </script>
  5. <template>
  6. <label><input v-model="checked" type="checkbox" />Want a pizza?</label>
  7. <div>{{ checked }}</div>
  8. </template>

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

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

  1. <input
  2. v-model="checked"
  3. true-value="Yes!"
  4. false-value="No"
  5. />

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

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

  1. <script setup>
  2. import { ref } from 'vue'
  3. const answer = ref('Yes!')
  4. </script>
  5. <template>
  6. <label>
  7. <input v-model="answer" type="checkbox" true-value="Yes!" false-value="No" />
  8. Want a pizza?
  9. </label>
  10. <div>{{ answer }}</div>
  11. </template>

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

Radio

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

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

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

  1. <script setup>
  2. import { ref } from "vue"
  3. const color = ref("white")
  4. </script>
  5. <template>
  6. <label><input type="radio" v-model="color" value="white" />White</label>
  7. <label><input type="radio" v-model="color" value="red" />Red</label>
  8. <label><input type="radio" v-model="color" value="blue" />Blue</label>
  9. <div>T-shirt color: {{ color }}</div>
  10. </template>

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

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

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

  1. <script setup>
  2. import { ref } from "vue"
  3. const color = ref("white")
  4. const COLORS = [
  5. { option: "white", label: "White" },
  6. { option: "black", label: "Black" },
  7. { option: "blue", label: "Blue" },
  8. ]
  9. </script>
  10. <template>
  11. <label v-for="{ option, label } in COLORS" :key="option">
  12. <input type="radio" v-model="color" :value="option" /> {{ label }}
  13. </label>
  14. <div>T-shirt color: {{ color }}</div>
  15. </template>

v-model修饰符

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

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

默认情况下,Vue提供了3个修饰符,trimnumberlazy

trim

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

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

  1. <script setup>
  2. import { ref } from 'vue'
  3. const text = ref('')
  4. </script>
  5. <template>
  6. <input v-model.trim="text" type="text" />
  7. <pre>"{{ text }}"</pre>
  8. </template>

number

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

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

  1. <script setup>
  2. import { ref } from "vue";
  3. const number = ref("");
  4. </script>
  5. <template>
  6. <input v-model.number="number" type="text" />
  7. <div>{{ typeof number }}</div>
  8. </template>

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

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

lazy

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

inputchange事件的主要区别是什么呢?

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

下面示例使用了lazy绑定:

  1. <script setup>
  2. import { ref } from 'vue'
  3. const text = ref('Unknown')
  4. </script>
  5. <template>
  6. <input v-model.lazy="text" type="input" />
  7. <div>{{ text }}</div>
  8. </template>

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

总结

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

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

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

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

在 Vue 中控制表单输入的更多相关文章

  1. 前端框架之Vue(8)-表单输入绑定

    基础用法 你可以用 v-model 指令在表单 <input> . <textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确 ...

  2. vue基础——表单输入绑定

    一.基础用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选择正确的方法来更新元素. 尽管有些神 ...

  3. vue 之 表单输入绑定

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  4. vue基础---表单输入绑定

    [一]基础用法 用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...

  5. 一起学Vue之表单输入绑定

    在Vue进行前端开发中,表单的输入是基础且常见的功能,本文以一个简单的小例子,简述v-model数据绑定的用法,仅供学习分享使用,如有不足,还请指正. 基础用法 你可以用 v-model 指令在表单 ...

  6. vue的表单输入绑定

    1.单行绑定 <p>{{logintype}}</p> <input type="text" v-model="logintype" ...

  7. vue之表单输入绑定

  8. Vue的指令系统、计算属性和表单输入绑定

    指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...

  9. Vue表单输入绑定(文本框和复选框)

    文本框 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">  ...

  10. Vue.js教程--基础2(事件处理 表单输入绑定

    事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...

随机推荐

  1. PHP Redis - String (字符串)

    string 是 Redis 最基本的类型,与Memcached类似,一个 key 对应一个 value string 类型是二进制 安全的.这意味着 Redis 的 string 可以包含任何数据. ...

  2. vue+element el-table有关Checkbox的一些功能

    在做项目的时候会碰到一些表格操作的问题其中我归整了一下有关于多选功能的一些记录 一:默认选中其中一行 <el-table class="editTable" :data=&q ...

  3. 【Android异常】关于Notification启动时,startForeground报错

    遇到两个报错: 第一个权限问题报错,好解决 startForeground requires android.permission.FOREGROUND_SERVICE Manifest给下权限就行 ...

  4. jquery.axios

    概念:通过 HTTP 请求加载远程数据. *注:所有的选项都可以通过$.ajaxSetup()函数来全局设置. 回调函数:要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.e ...

  5. C语言初级阶段7——指针4

    C语言初级阶段7--指针4 结构体指针 1.概念:所谓的结构体指针就是指向结构体变量的指针,一个结构体变量的起始地址就是这个结构体变量的指针.如果把一个结构体变量的其实地址存放在一个指针变量中,那么这 ...

  6. 高德地图使用websocket后重新设置点进行优化

    // 设置第一次点赋值,重新定义一个新数组,将设备号为对象名,索引值作为键值 const getListNEW = useCallback( (params, reload, gps) => { ...

  7. heimaJava18_线程

    Java 线程 单线程 线程(thread)是一个程序内部的一条执行路径. main方法的执行其实就是一个单独的执行路径 程序中如果只有一条执行路径,那么这个程序就是单线程的程序 多线程 多线程是指从 ...

  8. 大胖子走迷宫【spfa跑状态】【到这个点,并且这个胖 = max(到这个点,按照时间变的这个胖)

    大胖子走迷宫 题意 思路 普通的bfs走迷宫,多加了一个熟悉,就是胖的圈数.可以来回走,普通的bfs可能不太好处理,我们把这些状态放进spfa跑. 状态定义为{x,y,fat}:坐标位置,胖的圈数. ...

  9. intellij idea修改背景图片

    上方菜单栏选择 File -> settings -> plugins,搜索Backgroung Image Plus插件 下载之后restart 菜单栏上选择view   设置好后选择O ...

  10. go写文件常用方法

    注意:打开文件,一定记得关闭 file, err := os.OpenFile(name, flag, perm) defer file.Close() 一.打开文件|创建 1.os.OpenFile ...