SOURCE

console 命令行工具 X clear

                    
>
console
    var Main = {
        data () {
            return {
                formInline: {
                    user: '',
                    password: ''
                },
                ruleInline: {
                    user: [
                        { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                        { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                    ]
                }
            }
        },
      	mounted() {
          this.$refs['formInline'].validate((valid) => {
                if (valid) {
                  this.$Message.success('Success!');
                } else {
                  this.$Message.error('Fail!');
                }
              })
        },
        methods: {
          	handleValidate(name) {
              this.$refs[name].validate((valid) => {
                if (valid) {
                  this.$Message.success('Success!');
                } else {
                  this.$Message.error('Fail!');
                }
              })
            },
          	handleUsernameClearRule() {
              this.ruleInline = {
                ...this.ruleInline,
                user: [
                	{ required: false }
                ]
              }
            },
      			handlePasswordClearRule() {
              this.ruleInline = {
                ...this.ruleInline,
                password: [
                	{ required: false },
                	{ type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                ]
              }
            }
        }
    }

var Component = Vue.extend(Main)
new Component().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
<div id="app">
    <i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
        <form-item prop="user">
            <i-input type="text" v-model="formInline.user" placeholder="Username">
                <icon type="ios-person-outline" slot="prepend"></icon>
            </i-input>
        </form-item>
        <form-item prop="password">
            <i-input type="password" v-model="formInline.password" placeholder="Password">
                <icon type="ios-lock-outline" slot="prepend"></icon>
            </i-input>
        </form-item>
        <form-item>
            <i-button @click="handleValidate('formInline')">handleValidate</i-button>
            <i-button @click="handleUsernameClearRule">Clear username rule</i-button>
            <i-button @click="handlePasswordClearRule">Clear password rule</i-button>
        </form-item>
    </i-form>
</div>
@import url("//unpkg.com/iview/dist/styles/iview.css");
#app{padding: 32px;}