计数器在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; 
    } 
    } 
})