vuejs简单案例——计数器

最新推荐文章于 2024-05-22 21:15:32 发布

肝了肝了

最新推荐文章于 2024-05-22 21:15:32 发布

阅读量619

点赞数

分类专栏： vue.js 文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_62911018/article/details/121680668

版权

vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是一个使用Vue.js实现的简单计数器应用。应用包含两个按钮，分别用于增加和减少计数器的值，并在页面上实时显示当前计数器的数值。点击按钮会触发`add`或`sub`方法，通过`this.counter++`或`this.counter--`来更新状态。

摘要由CSDN通过智能技术生成

<body>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
        <!-- <button v-on:click="counter++">+</button>
        <button v-on:click="counter--">-</button> -->
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app=new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            add: function(){
                console.log('add被执行');
                this.counter++;
            },
            sub:function(){
                console.log('sub被执行');
                this.counter--;
            }
        }
    })
    </script>
</body>

肝了肝了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs简单案例——计数器

<body> <div id="app"> <h2>当前计数：{{counter}}</h2>  <button v-on:click="a.
复制链接

扫一扫

专栏目录