vue实现计数器_veu递加10-CSDN博客

本文链接：https://blog.csdn.net/weixin_43548815/article/details/114518655

在这里插入图片描述
data中定义数据:比如num
methods中添加两个方法:比如add(递增),sub(递减)
使用v-text将num设置给span标签
使用v-on将add,sub分别绑定给+,按钮
累加的逻辑:小于10累加,否则提示
递减的逻辑:大于0递减,否则提示

知识点
创建Vue示例时:el(挂载点),data(数据),methods(方法)
v-on指令的作用是绑定事件,简写为@
方法中通过this,关键字获取data中的数据
v-text指令的作用是:设置元素的文本值,简写为{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="app" id="app">
    <div class="input-num">
        <button @click="sub"> - </button>
        <span>{{ num }}</span>
        <button @click="add"> + </button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
            methods: {
                add: function(){
                    if(this.num<10){
                        this.num++;
                    }else{
                        alert('最大值');
                    }

                },
                sub: function() {
                    if( this. num>0){
                        this . num--;
                    }else{
                        alert('值为0');
                    }

                }
            }
            });
</script>
</body>
</html>