Vue-计数器实例

Vue-计数器实例

实例比较简单，对“+”与“-”按钮绑定点击事件，定义初始变量进行增减值，对负值进行判断。

核心代码

  <div id="app">
    <!-- 计数器功能区域 -->
    <div class="input-num">
      <button @click="pre">
        -
      </button>
      <span>{{num}}</span>
      <button @click="add">
        +
      </button>
    </div>
  </div>
<script>
  new Vue({
    el:"#app",
    data:{
      num:0
    },
    methods:{
      add:function () {
        this.num++;
      },
      pre:function () {
        if (this.num <= 0){
          alert("太小了！！！")
        }else {
          this.num--;
        }
      }
    }
  });
</script>