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>

使用VueJS根据复选框值切换输入元素的禁用属性

1 个答案: