How to set the disable property of a button in Vue

Vue sets the disable property of button

The form element has a disable attribute that controls whether the element is available.

1. This property has only 1 value in HTML

The usage is <button disable="disable">click</button>

After actual testing, disable accepts any attribute value, and even as long as you add the disable attribute to the tag, this form element becomes unavailable.

In other words, it is not feasible if you try to use the following statement to make the button available.

<button disable="false">Click</button>   //Still unavailable

2. If you need to control whether the button is available or not in the vue project

It's actually very simple

<template>
    <button v-bind:disable="dis">Click</button>   // Still unavailable</template>
<script>
    export default{
        data(){
            return {
                dis: false
            }
        }
    }
</script>

Although the native HTML tag has a disable attribute, no matter what its value is, the effect will not be available. But that's not the case in vue. Through attribute binding, you can use the bool value to control whether the corresponding form element is available.

The premise is that the attribute binding mechanism v-bind must be used.

Vue uses js to control the disabled attribute of button

<button ref="btn">Button</button>

It is best not to use this.$('disabled',true); disable the button

Because the effect of this is the same as this.$('disabled',false);, both of which are disabled, because true or false are converted into strings, and this string is basically equivalent to true, which means that they are all disabled writing methods.

If this.$ = true (disable button), this.$ = false (available button) can meet normal needs

However, it is not impossible to use setAttribute. To cancel the disable button, you must use it in conjunction with removeAttribute:

this.$('disabled');

vue does not recommend using dom, so of course it is written in the tag, :disabled=flag (note that flag is not quoted, flag is set to Boolean value in data)

The above is personal experience. I hope you can give you a reference and I hope you can support me more.