Vue.js 表单与 v-model

Vue.js 表单与 v-model

表单输入绑定

在 Vue.js 中，可以使用 v-model 指令将表单控件与数据属性绑定在一起。这样，当用户输入表单控件时，数据属性的值也会随之更新。

例如，以下代码将一个文本输入框与数据属性 message 绑定在一起：

<input v-model="message">

当用户在文本框中输入内容时，message 的值也会随之更新。

表单控件

Vue.js 支持多种表单控件，包括文本输入框、文本区域、选择框、复选框和单选按钮等。这些控件都可以通过 v-model 指令与数据属性绑定在一起。

例如，以下代码将一个选择框与数据属性 selected 绑定在一起：

<select v-model="selected">
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
  <option value="option3">选项 3</option>
</select>

当用户在选择框中选择一个选项时，selected 的值也会随之更新。

表单验证

Vue.js 提供了表单验证功能，可以帮助你轻松验证表单数据的有效性。

例如，以下代码使用 Vue.js 的内置验证规则来验证一个文本输入框：

<input v-model="username" :rules="usernameRules">

export default {
  data() {
    return {
      username: '',
      usernameRules: [
        (v) => !!v || '用户名不能为空',
        (v) => v.length >= 6 || '用户名长度至少为 6 个字符',
      ],
    };
  },
};

当用户在文本框中输入内容时，Vue.js 会自动验证输入的内容是否符合验证规则。如果验证不通过，Vue.js 会显示相应的错误提示信息。

表单提交

在 Vue.js 中，可以通过 @submit 事件监听器来处理表单提交。

例如，以下代码监听了一个表单的 @submit 事件：

<form @submit="submitForm">
  <input v-model="username">
  <input v-model="password">
  <button type="submit">提交</button>
</form>

export default {
  methods: {
    submitForm(e) {
      e.preventDefault();

      // 表单验证

      // 表单提交
    },
  },
};

当用户点击表单中的提交按钮时，submitForm 方法就会被调用。在这个方法中，你可以进行表单验证，然后提交表单数据。