计数器不会在vue.js中递增

Question

我有一个按钮，并添加了一个数据值增加5的点击事件 但它附加了5

https://jsfiddle.net/neyaz90/dkvmmrbd/

<div id="react">
<button @click='counter += 5'>Increment</button>
<p>{{result}}</p>

new Vue({
el:'#react',
data:{
counter:'0'
},
computed:{
  result:function(){
    return this.counter;
 }
}
});

请帮助。

Answer 1

您需要使用Number代替String 0，请在此处查看jsfiddle。

<强> HTML

<div id="react">
  <button @click="counter += 5">Increment</button>
  <p>{{ result }}</p>
</div>

<强> JS

new Vue({
  el: '#react',
  data: {
    counter: 0
  },
  computed: {
    result: function() {
      return this.counter;
    }
  }
})

Answer 2

counter定义为＆＃39; 0＆＃39;（字符串）而不是0（数字）。

您也不需要计算值来显示结果。

只有{{counter}}就足够了。