javascript - 将结果与 vue.js 中更改的值同步

Question

我编写了如下所示的 .vue 文件以在 100 毫秒后更改 h1#msg。

<template>
  <div id="main">
    <h1 id="msg">{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'Top',
  data () {
    let a=['TEST']
    setTimeout((function(a){a[0]='test'}),100)
    return {
      msg: a
    }
  }
}
</script>
<style>
</style>

但是我不能通过这段代码改变状态。我尝试使用 Array 通过引用传递值。 我不喜欢使用 querySelector()，因为它迫使我在 HTML 中添加态度和方法参数。

Answer 1

不要在data()里面写javascript，正确的是这段代码:

<script>
export default {
  name: 'top',
  data () {
    return {
      msg: 'test'
    }
  }
  mounted() {
    setTimeout(() => this.msg = 'Bu!', 100)
  }
}
</script>