为什么我无法在输出时获得计数器的值？它显示为"上面的按钮已被单击{{计数器}}次"。

Question

这里我的输出没有显示counter的值。这里是完整的javascript代码。而且计数器的值也没有增加!

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
</script>

Answer 1

数据必须是函数

data: () => ({
counter: 0
})

Answer 2

您必须返回data值。

<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
var example1 = new Vue({
el: '#example-1',
data: data: function () {
return { // need to return things
counter: 0
}
},
})
</script>

看这里