Typescript 从类对象属性更新Vue

我有一个包含属性的自定义类，我想知道如何更新vue文件以反映属性更改。为了简单起见，我精简了我的自定义类（我将在将来扩展它以获得更多属性）

在本例中，我希望btn在用户根据自定义类Stopwatch上的属性“isplay”单击它时更改颜色和图标

main.vue

<template>
  <q-page padding class="text-center q-pa-md">
    <q-btn
        :color="sw.isPlaying ? 'red' : 'green'"
        :icon="sw.isPlaying ? 'mdi-pause' : 'mdi-play'"
        @click="sw.toggle()"
    />
  </q-page>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  onMounted,
  onUnmounted
} from '@vue/composition-api';
import Stopwatch from 'src/utils/stopwatch';

export default defineComponent({
  name: 'Stopwatch',
  components: {},
  setup() {
    const sw = computed(() => new Stopwatch());
    return {
      sw
    };
  }
});
</script>

---

不要使用

computed

，而是使用

Stopwatch

实例的道具：

从'@vue/composition/api'导入{defineComponent，reactive}
导出默认定义组件({
设置（）{
常数sw=无功（新秒表（））；
返回{
西南
};
}
});

---

而不是

computed

，用于使

秒表

实例的道具反应：

从'@vue/composition/api'导入{defineComponent，reactive}
导出默认定义组件({
设置（）{
常数sw=无功（新秒表（））；
返回{
西南
};
}
});

---

感谢分享此演示而不仅仅是代码。非常感谢分享此演示而不仅仅是代码。非常感谢

export default class Stopwatch {
  isPlaying: boolean;

  constructor() {
    this.isPlaying = false;
  }

  // Start timer or continue from paused time
  startTimer() {
    this.isPlaying = true;
    console.log('play');
  }

  // Stop/Pause the timer
  stopTimer() {
    this.isPlaying = false;
    console.log('stop');
  }

  // Start/Stop timer or continue from paused time
  toggle() {
    if (this.isPlaying) {
      this.stopTimer();
    } else {
      this.startTimer();
    }
  }
}