菜鸟学习日记vue4-计数器

豆沙沙包?

于 2021-07-26 13:46:46 发布

阅读量79

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zsysingapore/article/details/119107569

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

(1)data 中定义数据比如：num
(2)methods添加两个方法：如递增或者递减
(3)v-text将num值设置给span标签;v-text是设置文本值，可以用｛｛｝｝代替
(4)v-on将 add和sub 分别绑定+，-按钮
(5)累加逻辑小于10累加，超出显示alert框
(6)递减的逻辑：大于0则可以递减，否则显示alert框
2.demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>

豆沙沙包?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜鸟学习日记vue4-计数器

(1)data 中定义数据比如：num(2)methods添加两个方法：如递增或者递减(3)v-text将num值设置给span标签(4)v-on将 add和sub 分别绑定+，-按钮(5)累加逻辑小于10累加，超出显示alert框(6)递减的逻辑：大于0则可以递减，否则显示alert框2.demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录