我们通常认为,prop 属性是我们需要进行表单校验的时候使用的。但是当我们进行一些比较复杂的校验的时候,对 prop 的理解太浅就会使我们感到头疼:prop 属性究竟做了些什么?

element-ui 的 prop 属性

官网的解释有些拗口,用人话来说就是:prop 属性让你的校验规则和数据匹配。

<el-form :model="ruleForm" :rules="rules">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
      };
    }
  }
</script>

以上的一个简单的例子可以告诉我们:prop 属性绑定了字段名 name,在表单验证时,就会找到其内部的表单组件绑定的变量 ruleForm.name 的值是否符合 rules 中与 name 对应的验证规则

所以,在进行简单的校验时,把 prop 的属性值设置为需要校验的字段名即可

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐