技術標籤：vue.jsvue

我的vue專案是3.0版本

<template>
  <span>get set 用</span>
  {{ msgValue }} <span v-if="time">{{ time }} 秒後修改 msgValue 的值</span>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'

@Options({})
export
 
 default class ClassPage extends Vue {
  msg = '66'
  time = 3

  get msgValue() {
    return this.msg + '777'
  }

  set msgValue(value: string) {
    this.msg = value
  }

  mounted() {
    setTimeout(() => {
      this.msgValue = '999'
    }, 3000)
    this.setTime()
  }

  setTime() {
    const k =
 
 setInterval(() => {
      this.time--
      if (this.time === 0) {
        clearInterval(k)
      }
    }, 1000)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>

3秒後修改msg的值也同事修改msgValue值