Vue-计数器

本来不想写学习笔记的，但还是怕自己忘了，所以记录下学的东西(话说前端这玩意儿实在是太TM烦了)

好了，假设现在你在某电商平台上看中了一款商品，而且你特别喜欢这款商品，那自然要多买一些了，于是这时候就会有一个“+”按钮，你十分兴奋地点击这个按钮，就跟这个商品免费一样，你感到特爽！当然，商家也感到特别爽。不过呢，理智还是在这场与你头脑中野性的斗争中占据了上风，因为你会发现你的钱包已经瘪了。这时候你就需要点击旁边的“-”按钮，虽然很不甘心，但是你还是接受了被现实打败的这一事实。现在，我们就想做出这样一个点击器出来，以实现计数功能。

其实很简单，首先我们需要一个div块，这个div块的id属性应该是，我们命个名吧，就叫app,好了！

然后，这个app的div块应该包含三个部分，分别是前后两个按钮，中间有一个数字，用来显示。按钮好办，中间数字怎么显示？用渲染，学了的东西要会用嘛。我们用两个大括号，中间写上一个"num"来表示数字。

就像这样：

1 <div id="app">
2        <button @click="sub">-</button>
3        <span>{{ num }}</span>
4        <button @click="add">+</button>
5 </div>

现在，我们就需要在下面写上script标签，然后里面写我们的vue代码了：

第一行当然是万年不变的vue一个变量了，格式啥的很简单，看就完了。

然后嘞，是el属性，告诉它我们是要跟哪个建立关系。然后写个data,里面有个num属性，初始值我们就记为1好了。

然后，因为我们想要实现的是点击效果，因此必须要写几个函数，再到对应的html代码中绑定点击事件。根据需要，我们就分别实现sub函数和add函数。所以这个时候我们还需要回到之前的div,然后在里面给绑定一下事件。

如何在函数里面获取num的值？用this关键字就好了。实现逻辑很简单，我们希望在数量达到10的时候让客户回归理性，总不能让人家过于野性消费；另外我们也是要生存的，也不可能让人家白嫖对吧，所以数量达到0的时候就不能再减了。这实现起来很简单，用if就行。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <button @click="sub">-</button>
        <span>{{ num }}</span>
        <button @click="add">+</button>
    </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>

 

 

 

posted @ 2022-02-13 15:46  EvanTheBoy  阅读(294)  评论(0)    收藏  举报