2021-03-13

vue怎么设置计数器

<div id="app" >
        <div class="input">
            <button @click="sub">-</button>   //给sub(递减)绑定一个点击事件v-on:   简写@click
            <span>{{ num }}</span>  //v-text:设置元素的文本值，简写{{}}
            <button @click="add">+</button>  //给add(递增)绑定一个点击事件v-on:   简写@click
        </div>
    </div>

<script>
var app = new Vue({  //实例一个vue对象
        el: "#app",  //el:挂载点
        data: {        //data:数据
            num: 1
        },
        methods: {    //methods:方法
            sub: function () {       //给sub设置一个逻辑
                if (this.num >0) {   //this.num  通过this方法中获取data中的数据
                    this.num--;
                } else {
                    alert("太小了，不减了");
                }
            },
            add: function () {     //给add设置一个逻辑
                if (this.num < 10) {    //this.num  通过this方法中获取data中的数据
                    this.num++;
                } else {
                    alert("太大了，不加了");
                }
            }
        },

    })