Vue.js 表单输入值绑定

Vue.js是一个用于开发 Web 用户界面的渐进式 JavaScript 框架。它是一个高性能、平易近人且通用的框架。我们可以创建单页应用程序以及全栈应用程序。它建立在 HTML、CSS 和 Javascript 之上，这使得开发人员可以更轻松地在任何阶段将 Vue.js 集成到任何应用程序中。

表单输入值绑定由v-model指令处理，该指令有助于绑定静态字符串，以简化输入值绑定。 v-model可用于不同类型的元素，如input、textarea、checkbox、radio 和 select 。它会根据使用的元素自动调整到不同的 DOM 属性和事件对。

v 型 可用于在表单输入和文本区域上创建双向数据绑定。具有文本类型和文本区域的输入使用 value 属性和 input 事件来处理 value 绑定。它不计算复选框、单选和选择元素的占位符文本和初始值。

不同元素的表单输入值绑定 v-model：

• input和textarea ：这些元素使用 value 属性和 input 事件。
• 复选框和单选类型的输入：这些元素使用选中的属性和 v-model 的更改事件。
• 选择元素：它将值用作道具和更改事件。

语法：对于不同的输入元素，我们有不同的语法，因此有不同的方法。以下是不同元素的语法列表。

• 文本类型的输入元素：它存储单行文本。

 {{ message }} 

• textarea 元素：v-model 存储多行文本。

• 复选框类型的输入元素： v-model 存储真或假。

• radio 类型的 input 元素： v-model 存储了 radio 元素的值。

• 选择元素： v-model 存储所选选项的值。

  A
  B
  C

安装过程：

第 1 步：使用以下命令使用 npm node.js 包管理器创建一个新的 Vue.js 项目。

npm init vue@latest

输入项目名称并预设项目如下：

项目结构：安装成功后，会形成如下的项目结构。

项目结构

示例 1：输入元素 – 单行输入

这里我们有一个以 v-model 作为名称变量的单行输入元素。 v-model 会将更新后的值保存在输入元素中。

App.vue

  export default {
    data() {
      return {
        name: "",
      };
    },
  };

  

输出：

示例 2：textarea 元素 - 多行输入

在这个例子中，我们有一个可以存储多行输入的 textarea 元素，并且 v-model 将处理更改事件并将更新的值存储在一个名为 about 的变量中。

应用程序.vue

  export default {
    data() {
      return {
        about: "",
      };
    },
  };

  

输出：

示例 3：复选框元素

在这个例子中，我们有一个复选框类型的输入元素，我们可以根据我们对输入元素的选择来选择真或假。

应用程序.vue

  export default {
    data() {
      return {
        check: "",
      };
    },
  };

  

输出：

示例 4：无线电元素

在下面的示例中，我们有三个单选选项，我们可以从中选择任何一个，并且选择的值将由 v-model 存储，我们可以在网页上显示。

应用程序.vue

  export default {
    data() {
      return {
        tutorial: "",
      };
    },
  };

  

输出：

示例 5：选择元素

在此示例中，我们在 select 元素中有一个项目列表，我们将从其中选择一个选项。 v-model 仅针对 select 元素编写，并自行从 option 元素中获取值。

应用程序.vue

  export default {
    data() {
      return {
        tutorial: "",
      };
    },
  };

  

输出：

参考： https ://vuejs.org/guide/essentials/forms.html#value-bindings