Vue实例1：计数器（v-on，v-text）

泡菜鱼丷

已于 2022-03-22 21:31:27 修改

阅读量1k

点赞数 1

分类专栏： Vue笔记文章标签： vue

于 2022-03-21 21:09:52 首次发布

本文链接：https://blog.csdn.net/weixin_57275829/article/details/123639839

版权

Vue笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

步骤:

data中定义数据：比如num
methods中添加两个方法add（递增）sub（递减）
使用v-text将num设置给span标签
使用v-on将add和sub分别绑定给+ -按钮

逻辑：累加时小于10累加，否则提示；递减时大于0递减，否则提示。

<body>
    <!--计数器功能区域-->
    <div id="app">
            <button @click="sub">
                -
            </button>
            <span> {{num}} </span>
            <button @click="add">
                +
            </button>
    </div>
    <!--计数器逻辑区域-->
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    console.log('add');
                    if(this.num<10){
                    this.num++;
                }else{
                   alert('最大值了');
                    }
                   
                },
                sub:function(){
                    console.log('sub');
                    if(this.num>0){
                    this.num--;
                }else{
                        alert('最小值了')
                    }
                },
            }
        })
    </script>
</body>

总结：

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

注：本文只是作为学习随记

泡菜鱼丷

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实例1：计数器（v-on，v-text）

步骤:data中定义数据：比如num methods中添加两个方法add（递增）sub（递减）使用v-text将num设置给span标签使用v-on将add和sub分别绑定给+ -按钮逻辑：累加时小于10累加，否则提示；递减时大于0递减，否则提示。<body>  <div id="app"> <button @click="sub"> -
复制链接

扫一扫