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;
}