VueJS v-if 用于禁用/启用按钮

Question

我的用例是这样的。

1. 我有一个 html <p> 元素，它的 id 是“demo”。
2. 我想通过v-if 读取<p> 元素，如果该

   元素中的值等于“EXPIRED”，那么我想删除disabled 中的属性我的按钮。

未来解释我的用例，我想最初禁用我的按钮，当该段中的状态更新为 EXPIRED 时，我想从我的按钮中删除该禁用部分。

如何使用

1. 计算属性/观察者
2. v-如果

<template lang="html">
  <div class="">
    <p id="demo"></p>
    <button type="button" name="button" class="btn btn-primary" disabled>Start</button>
  </div>
</template>

Answer 1

如果你使用非 Vue DOM 操作来设置这个 EXPIRED 东西，你就迷路了。不要将它与 Vue 混合使用。相反，我会这样做：

<template lang="html">
  <div class="">
    <p id="demo">{{ status }}</p>
    <button type="button" name="button" class="btn btn-primary" :disabled="status !== 'EXPIRED'">Start</button>
  </div>
</template>

status 是 data() 函数中 VM 的属性。