Question

我是JavaScript新手。最近我使用webpack + vuejs创建SPA作为我的服务器。

我做了以下Hello.vue，

<template>
  <div class="hello">
    <h1>{{ msg1 }}</h1>
    <h1>{{ msg2 }}</h1>
    <h1>{{ msg3 }}</h1>
    <button @click='createDevice'>Create a new device
    </button>
  </div>
</template>

<script>
var count = 1
export default {
  name: 'hello',
  data: () => {
    return {
      msg1: 'I am Stephen',
      msg2: 'Hello',
      msg3: '0'
    }
  },
  methods: {
    createDevice: () => {
      count += 1
      this.msg3 = count.toString()
      console.log(this.msg3)
    }
  }
}
</script>

但是我发现网页上的msg3没有更新，但我可以监控“this.msg3”在开发控制台中的增加。

任何人都可以提供帮助吗？

非常感谢！

Stephen Lau

Answer 1

尝试https://jsfiddle.net后，我发现速记＆＃34;（）=＆gt; ＆＃34;无法使用。更改＆＃34;（）=＆gt;＆＃34;返回＆＃34; function（）＆＃34;，文本绑定有效。

<template>
  <div class="hello">
    <h1>{{ msg1 }}</h1>
    <h1>{{ msg2 }}</h1>
    <h1>{{ msg3 }}</h1>
    <button @click='createDevice'>Create a new device
    </button>
  </div>
</template>

<script>
var count = 1
export default {
  name: 'hello',
  data: function () {
    return {
      msg1: 'I am Stephen',
      msg2: 'Hello',
      msg3: '0'
    }
  },
  methods: {
    createDevice: function () {
      count += 1
      this.msg3 = count.toString()
      console.log(this.msg3)
    }
  }
}
</script>

非常感谢。

vue数据不会在网页中刷新

1 个答案: