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

Question

我写了如下的.vue文件，以在100ms后更改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>

但是，我无法通过此代码更改状态。 我试图使用数组通过引用传递值。 我不喜欢使用querySelector（），因为它迫使我在HTML和方法的参数中添加态度。

Answer 1

不要在data()编写javascript，正确的代码是：

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

Answer 2

尝试此代码段

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

<script>
  export default {
  name: 'Top',
  data () {
    return {
      msg: 'a'
    }
  },
  created() {
    setTimeout(() => this.msg = 'Hello World!', 100)
  }
}
</script>

Answer 3

您的data应仅将变量声明为更改前要更改的变量。 然后在mounted执行timeout 。