Vue实现计数器的学习笔记

最新推荐文章于 2022-02-08 21:41:00 发布

悍将朱哥

最新推荐文章于 2022-02-08 21:41:00 发布

阅读量408

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/jiarui_mama/article/details/114631660

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

效果图如下：
点击加号技术开始加1，点击减号计数开始减1
在这里插入图片描述
源代码如下：
实现了两种方式，1种直接修改变量值，一种调用函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数为{{counter}}</h2>

    <!--<button v-on:click="counter++">+</button>
    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>

    const app=new Vue({
        el:"#app",
        data:{
            counter:0
        },
        methods:{
            add:function(){
                this.counter++;
            },
            sub:function(){
                this.counter--;
            }
        }
    });

</script>
</body>
</html>

悍将朱哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue实现计数器的学习笔记

效果图如下：点击加号技术开始加1，点击减号计数开始减1源代码如下：实现了两种方式，1种直接修改变量值，一种调用函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"><h2>当前计数为{{c
复制链接

扫一扫