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

Question

我的用例是这样的。

1. 我有一个html <p>元素，其ID是＆＃34; demo＆＃34;。
2. 我想通过<p>读取v-if元素，如果

   元素中的值等于＆＃34; EXPIRED ＆＃34;然后我想删除按钮中的disabled属性。

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

如何使用

实现此目的
1. 计算属性/观察者
2. V-如果
＆＃13;
＆＃13;
<template lang="html">
  <div class="">
    <p id="demo"></p>
    <button type="button" name="button" class="btn btn-primary" disabled>Start</button>
  </div>
</template>
＆＃13;
＆＃13;
＆＃13;

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的属性。