VueJS V-如果禁用/启用按钮

Question

我的用例是这样的。

1. 我有一个HTML <p>元素，其ID为“演示”。
2. 我想通读该<p>元素v-if，如果其中的值

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

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

我如何使用

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

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