運用v-text、v-html、v-on指令

計數(shù)器

步驟：
1.data中定義數(shù)據(jù)：num
2.methods中添加兩個方法：add（增加），sub（減少）
3.使用v-text將num設(shè)置給span標簽
4.使用v-on將add，sub分別綁定給+，-按鈕
5.增加的邏輯：小于10累加，否則提示
6.減少的邏輯：大于0遞減。否則提示

注意：
1.創(chuàng)建Vue實例時：el（掛載點），data（數(shù)據(jù)），methods（方法）
2.v-on指令的作用是綁定事件，簡寫為@
3.方法內(nèi)部通過this，關(guān)鍵字獲取data中的數(shù)據(jù)
4.v-text指令的作用是：設(shè)置元素的文本值，簡寫為{{}}
5.v-html指令的作用是：設(shè)置元素的innerHTML

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

var app = new Vue({
    el:"#app",
    data:{
        num:0
    },
    method:{
        add:function(){
        if(this.number<10){
        this.number++;
        }else{
        alert("已到達最大值！");
            }
        },
        sub:function(){
        if(this.number>0){
        this.number--;
        }else{
        alert("已到達最小值！");
            }
        }
    }
})