vue动态rules

Vue动态rules是指在Vue.js中根据不同的条件或者数据动态生成表单验证规则。通常情况下，我们可以使用静态的验证规则来验证表单输入，例如使用vuelidate或者vee-validate等插件。但是有时候我们需要根据不同的场景或者用户输入来动态生成验证规则。

在Vue中，我们可以通过计算属性或者watch来实现动态生成验证规则。下面是一个简单的示例：

<template>
  <div>
    <input v-model="email" placeholder="Email">
    <input v-model="password" placeholder="Password">
    <button @click="submitForm">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  computed: {
    validationRules() {
      const rules = {};
      if (this.email) {
        rules.email = { required: true, email: true };
      }
      if (this.password) {
        rules.password = { required: true, min: 6 };
      }
      return rules;
    }
  },
  methods: {
    submitForm() {
      // 验证表单
      this.$v.$touch();
      if (!this.$v.$invalid) {
        // 表单验证通过，提交表单
        // ...
      }
    }
  }
}
</script>

在上面的示例中，我们使用了计算属性`validationRules`来根据`email`和`password`的值动态生成验证规则。如果`email`有值，则添加`required`和`email`验证规则；如果`password`有值，则添加`required`和`min`验证规则。然后在提交表单时，我们使用`this.$v.$touch()`来触发表单验证，如果表单验证通过，则可以提交表单。

这样，我们就可以根据不同的条件动态生成表单验证规则了。