vue el-form :rule 如何控制信息的样式

在Vue的Element UI组件`el-form`中，`:rule`属性用于设置验证规则，但它主要用于数据的合法性校验，并不会直接影响信息的样式。如果你想基于输入错误的状态来改变表单标签、提示信息等的样式，你可以结合使用`v-bind:class`或者自定义的`error-messages`选项。

例如，你可以创建一个验证规则对象，当某个字段的验证失败时，会返回一个包含验证错误状态的对象，然后你可以根据这个状态来动态绑定CSS类：

<template>
  <el-form v-model="form" :rules="rules" label-width="80px">
    <!-- 表单项 -->
    <el-form-item prop="username">
      <el-input v-model="form.username"></el-input>
      <el-error-message slot="message" :class="{ 'is-danger': validateFailed('username') }">请输入用户名</el-error-message>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        username: { required: true, message: '用户名不能为空', trigger: 'blur' },
      },
    };
  },
  methods: {
    validateFailed(prop) {
      const errors = this.$refs.form.validateFields(prop);
      return errors && errors[prop];
    }
  }
};
</script>

<style scoped>
.is-danger {
  color: red;
  font-weight: bold;
}
</style>

在这个例子中，当`validateFailed('username')`返回`true`时，对应的`is-danger`类就会被添加，显示红色的文字。