VUE实际案例--计数器（商城数量加减）

实现效果

 

 

使用时候，自己添加css就好

<div id="app">
    <button v-on:click="subtraction">-</button>
    <span>{{number}}</span>
    <button v-on:click="add">+</button>
</div>


<script src="vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            number:1
        },
        methods:{
            subtraction:function () {
                if (this.number <= 1){
                    alert("超出范围！")
                }else {
                    this.number -= 1
                }
            },
            add:function () {
                if (this.number >= 5){
                    alert("超出范围！")
                }else {
                    this.number += 1
                }
            },
        }
    })

</script>