第一个例子：计数器的实现

最新推荐文章于 2022-10-08 13:37:57 发布

Howardlam

最新推荐文章于 2022-10-08 13:37:57 发布

阅读量276

点赞数

文章标签： Vue.js 计数器数据绑定事件处理条件判断

本文链接：https://blog.csdn.net/Howardlamlam/article/details/116271496

版权

第一个例子：计数器的实现

玩法：中间显示数量，左右分别是减和加。点1下加就加1，点1下减就减1。点到0和10就提示不能再点了！

用了3个元素：两个Button，中间1个Span。点击Button，Span数字变化。

写el挂app。
建立data，名字给num，默认1。然后用“{{}}”挂到span里面。
添加方法，用methods。一个是add增加，一个是sub递减。
用v-on的简写分别给两个Button挂点击事件。@click=“add”和@click=“sub”
在add和sub用this.num写事件。加1就是“++”，减1就是“–”
添加最大最小值的逻辑判断：在methods里面的add和sub的function里面加判断，add小于10的，就可以++，然后esle弹框。同样sub大于0的就可以–，然后然后esle弹框。

自己的总结：这种判断需要在methods里面加，而不是在元素那加。

代码如下：

<!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>计数器</title>
</head>
<body>
    <div 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("最小啦！");
            }
            
          }
      }
    })
</script>
</body>
</html>

Howardlam

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一个例子：计数器的实现

第一个例子：计数器的实现玩法：中间显示数量，左右分别是减和加。点1下加就加1，点1下减就减1。点到0和10就提示不能再点了！用了3个元素：两个Button，中间1个Span。点击Button，Span数字变化。写el挂app。建立data，名字给num，默认1。然后用“{{}}”挂到span里面。添加方法，用methods。一个是add增加，一个是sub递减。用v-on的简写分别给两个Button挂点击事件。@click=“add”和@click=“sub”在add和sub用this.num
复制链接

扫一扫