使用VueJS根據復選框值切換輸入元素的禁用屬性

Question

我正在嘗試創建一種表單，如果選中了一個復選框，則其中一個文本輸入字段將具有disabled屬性。 我試過了：

 new Vue({ el: "#app", data: { isChecked: false, name: null } }) 

 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> <input type="text" v-model="name" :class="{disabled: isChecked}" placeholder="disabled if box checked"> <input type="checkbox" v-model="isChecked"> </div> 

Answer 1

相反，如果使用條件類，則可以使用disabled的屬性，並在其前面添加一個:並將其綁定到isChecked變量，從而使該屬性動態化。 您的代碼將如下所示：

<div id="app">
  <input type="text" v-model="name" :disabled="isChecked" placeholder="disabled if box checked">
  <input type="checkbox" v-model="isChecked">
</div>