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

亚连
Release: 2018-06-05 11:40:09
Original
3286 people have browsed it

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')
Copy after login

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>
Copy after login

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;
  }
 }
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template