vue基础应用-购物车加减器的实现

购物车框架

<div id="app">    
    <div class="add sub">        
	<button @click="sub">-</button>        
	<span>{{num}}</span>        
	<button @click="add">+</button>    
     </div>
</div>

加减的实现

<script>    
var app = new Vue({        
  el:"#app",        
  data:{            
    num:1,        
   },        
  methods:{            
     add:function(){               
 	if(this.num>=10){                   
 	alert("到达上限")                
       }                 
 	else this.num++;            
   },            

     sub:function(){                
       if(this.num<=1){                    
       alert("到达下限")               
       }                
        else this.num--;            
      }        
    }    
 })
 </script>

一开始num前没有加this，导致浏览器报错num未定义。
this在vue里还是挺重要的。