計數器在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

counter用'0'（字符串）而不是0（數字）定義。

您也不需要計算值來顯示結果。

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

Answer 2

您需要使用Number而不是String來代替0請參閱jsfiddle這裏。

HTML

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

JS

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