Home >Web Front-end >JS Tutorial >How to dynamically bind attributes of form elements in vue

How to dynamically bind attributes of form elements in vue

亚连
亚连Original
2018-06-05 11:40:093243browse

Below I will share with you an article on the attribute method of dynamically binding form elements in Vue. It has a good reference value and I hope it will be helpful to everyone.

In vue, sometimes you may want to add attributes to an element like using jq. For example,

$('#select1').attr('disabled','disabled')

This method can also be implemented, but if you can use vue's method in vue, try not to use it. Using jq

Using the vue method to add attributes can be like this:

<select v-model=&#39;issues&#39; class="ui dropdown t-select-list" :disabled=&#39;isDisabled&#39;>
 <option></option>
</selected>

disabled is the native attribute of the form element, and you can directly use the attribute binding Bind with a certain syntax: disabled, and then add a condition to control the dynamic addition and deletion of this attribute, such as:

watch:{
 issueDatas(){
  if(this.issueDatas.state==5){
   this.isDisabled=true;
  }
 }
}

When the status is 5, you can make the select read-only status

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use webpack template in vue-cli to solve project construction and packaging path problems

Under vue-cli Using vuex (detailed tutorial)

How to use vue-cli to write a vue plug-in

The above is the detailed content of How to dynamically bind attributes of form elements in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn