06-Vue之计数器案例-白红宇的个人博客

06-Vue之计数器案例

发布日期：2021-05-07 13:04:31 浏览次数：20 分类：原创文章

本文共 1385 字，大约阅读时间需要 4 分钟。

1. 计数器案例

1.1 思路

data中定义数据：比如num
methods中添加两个方法：比如add（递增），sub（递减）
使用v-text将num设置给span标签
使用v-on将add，sub分别绑定给+，按钮
累加的逻辑：小于10累加，否则提示
递减的逻辑：大于0递减，否则提示
完整代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>计数器</title></head><body>    <div id='app'>        <div id='input-num'>            <button @click='sub'>-</button>            <span v-text='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('你是不是喜欢我！')                    }                }            }        })    </script></body></html>

1.2 知识点总结

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

上一篇：07-Vue之本地应用v-show/v-if指令

下一篇：05-Vue之本地应用v-on指令

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

1. 计数器案例

1.1 思路

1.2 知识点总结

发表评论

最新留言

关于作者

推荐文章