Vue 动态改变 button 的 disabled 状态

开发调优
1

在使用 iview 做自定义表单验证时，有一个需求是当用户名和手机号都填写正确后，下一步按钮的 disabled 设置为 false，记录一下学习过程。

<Button type="primary" shape="circle" :disabled="checkStep1Already">下一步</Button>

data () {
	const validateMobile = (rule, value, callback) => {
		if (/(^0?[1][3-9][0-9][\d]{8}$)|(^0[1-9][\d]{1,2}[- ]?[\d]{7,8}[-| ]?[\d]*$)/.test(value)) {
			this.mobileAlready = true
			callback()
		} else {
			this.mobileAlready = false
			callback(new Error('请输入正确的手机号码'))
		}
	}
	const validateUsername = (rule, value, callback) => {
		if (/^[\u4e00-\u9fa5_a-zA-Z0-9_]{4,15}$/.test(value)) {
			this.usernameAlready = true
			return callback()
		} else {
			this.usernameAlready = false
			return callback(new Error('用户名要求4-15字符'))
		}
	}
	return {
		usernameAlready: false,
		mobileAlready: false,
		formData: {
			username: '',
			mobile: '',
			email: '',
			password: '',
		},
		formRule: {
			username: [{
				validator: validateUsername,
				required: true,
				trigger: 'blur'
			}],
			mobile: [{
				validator: validateMobile,
				required: true,
				trigger: 'blur'
			}],
			password: [{
				required: true,
				message: '请填写密码',
				trigger: 'blur'
			}, {
				type: 'string',
				min: 6,
				message: '密码长度不能小于6位',
				trigger: 'blur'
			}]
		}
	}
},
computed: {
	checkStep1Already () {
		return !(this.usernameAlready && this.mobileAlready)
	}
}