Vue.js 表单输入绑定

Vue.js 提供了一个 v-model 指令，可以用来在表单输入、文本、textarea 和 select 字段上创建双向数据绑定。

v-model 指令根据输入类型自动选择更新元素的正确方式。 它通过绑定输入文本元素和绑定到变量的值来提供双向数据绑定。 v-model 指令在内部使用不同的属性，并为不同类型的输入元素发出不同的事件。 通常，我们在表单输入绑定中使用三种类型的绑定

• Textarea 绑定： 在此绑定中，我们使用 text 和 textarea 来绑定 value 属性和 input 事件。
• Radio 和 Select 绑定： 在此绑定中，我们使用复选框和单选按钮来绑定 checked 属性和 change 事件。
• 修饰符绑定： 我们还可以在表单输入绑定示例中使用 .lazy、.trim、.number 等修饰符。

Textarea 绑定

让我们举一个简单的例子来演示 textarea 绑定

Index.html 文件

Index.js 文件

Index.css 文件

程序执行后，您将看到以下输出

输出

您可以看到文本框和 textarea 现在都是空的。 复选框也未选中并显示 false 值。 现在，在文本框和 textarea 中键入一些值，v-model 会分配 value name，并且 name 会显示在 {{name}} 中，它会显示在文本框中键入的任何内容。 以同样的方式，将显示在 textarea 中编写的值。

Radio 和 Select 绑定

让我们举一个简单的例子来演示 radio 和 select 绑定

Index.html 文件

Index.js 文件

程序执行后，您将看到以下输出

输出

您可以看到默认选择的单选元素是 No，选择的语言是 Java。 现在，您可以根据需要更改值。 请参阅以下输出

修饰符绑定

让我们看一个例子来演示所有三个修饰符 .trim、.number 和 .lazy 。

.number 修饰符： 当您希望用户输入自动转换为数字时使用。 它允许您仅输入数字。 除了数字之外，它不接受任何其他输入。

.lazy 修饰符： 它用于仅在完全输入并在用户离开文本框后才显示文本框中的内容。 默认情况下，v-model 在每次 input 事件后将输入与数据同步。

.trim 修饰符： 此修饰符用于自动修剪用户输入中的空格。 它删除在开头和结尾输入的任何空格。

Index.html

Index.js

程序执行后，您将看到以下输出

输出

您可以看到每个修饰符都是空的。 现在，您可以输入任何值以查看以下输出结果。