vue实现动态禁用启用
动态禁用/启用表单元素
在Vue中可以通过v-bind绑定disabled属性实现动态禁用
<template>
<button :disabled="isDisabled">提交</button>
<input type="text" :disabled="isDisabled">
</template>
<script>
export default {
data() {
return {
isDisabled: true
}
},
methods: {
toggleDisabled() {
this.isDisabled = !this.isDisabled
}
}
}
</script>条件渲染替代禁用
对于复杂场景可以使用v-if/v-else进行条件渲染
<template>
<button v-if="!isDisabled" @click="submit">提交</button>
<button v-else disabled>提交</button>
</template>动态表单控制
结合计算属性实现多表单项联动控制
<template>
<input type="checkbox" v-model="agreeTerms">
<button :disabled="!isFormValid">注册</button>
</template>
<script>
export default {
data() {
return {
agreeTerms: false,
username: ''
}
},
computed: {
isFormValid() {
return this.agreeTerms && this.username.length > 0
}
}
}
</script>自定义指令实现
可以创建自定义指令实现更复杂的禁用逻辑
Vue.directive('dynamic-disable', {
update(el, binding) {
el.disabled = binding.value()
}
})<button v-dynamic-disable="shouldDisable">按钮</button>动态CSS类名
通过绑定class实现视觉上的禁用效果
<button :class="{ 'disabled-state': isDisabled }">按钮</button>.disabled-state {
opacity: 0.5;
cursor: not-allowed;
}
