面试题：Vue表单绑定与常见表单校验框架集成基础

Question

在Vue项目中，如何使用v-model进行表单元素的双向绑定？以输入框为例说明。若要集成Element - UI的表单校验框架，简述基本的步骤和关键配置项。

Answer 1

使用v-model进行表单元素双向绑定（以输入框为例）

在Vue项目中，对于输入框使用v-model进行双向绑定非常简单。假设我们有一个数据变量message，在模板中可以这样写：

<template>
  <div>
    <input v-model="message" type="text">
    <p>你输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

这里v-model会将输入框的值与data中的message变量进行双向绑定，输入框的值改变会同步到message，message改变也会同步到输入框。

集成Element - UI的表单校验框架

1. 安装Element - UI： 在项目根目录下运行npm install element - ui -S或yarn add element - ui。
2. 引入Element - UI： 在main.js中引入Element - UI及其样式。

   import Vue from 'vue';
   import ElementUI from 'element - ui';
   import 'element - ui/lib/theme - chalk/index.css';
   Vue.use(ElementUI);
   

3. 模板中使用表单校验：

   <template>
     <el - form :model="ruleForm" :rules="rules" ref="ruleForm" label - width="100px">
       <el - form - item label="用户名" prop="username">
         <el - input v - model="ruleForm.username"></el - input>
       </el - form - item>
       <el - form - item label="密码" prop="password">
         <el - input v - model="ruleForm.password" type="password"></el - input>
       </el - form - item>
       <el - form - item>
         <el - button type="primary" @click="submitForm('ruleForm')">提交</el - button>
         <el - button @click="resetForm('ruleForm')">重置</el - button>
       </el - form - item>
     </el - form>
   </template>
   

4. 定义数据和校验规则：

   <script>
   export default {
     data() {
       return {
         ruleForm: {
           username: '',
           password: ''
         },
         rules: {
           username: [
             { required: true, message: '请输入用户名', trigger: 'blur' },
             { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
           ],
           password: [
             { required: true, message: '请输入密码', trigger: 'blur' },
             { min: 6, message: '密码长度至少6位', trigger: 'blur' }
           ]
         }
       };
     },
     methods: {
       submitForm(formName) {
         this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('提交成功');
           } else {
             alert('校验失败');
             return false;
           }
         });
       },
       resetForm(formName) {
         this.$refs[formName].resetFields();
       }
     }
   };
   </script>
   

   关键配置项：
   • :model：绑定表单数据对象。
   • :rules：定义校验规则对象。
   • prop：在el - form - item中指定校验的字段名，要与rules中的字段名对应。
   • trigger：触发校验的时机，如blur（失去焦点）、change（值改变）等。