vue日记之计数器

最新推荐文章于 2022-03-16 13:04:07 发布

小白白中之白

最新推荐文章于 2022-03-16 13:04:07 发布

阅读量81

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/m0_53438035/article/details/117170777

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文展示了如何在Vue.js中创建一个简单的计数器应用，通过`data`属性和`methods`实现点击按钮增加和减少计数值，并在控制台记录触发的事件。代码示例详细解释了Vue的事件绑定和方法调用，帮助理解Vue的响应式系统。

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

话不多说直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>当前计数:{{aaa}}</p>
    <button v-on:click="aaa++">+</button>
    <button v-on:click="aaa--">-</button> <!--aaa为变量-->
</div>
</body>
<script src="vue.js"></script>
<script>
    let a=new Vue({
        el:"#app",
        data:{
            aaa:0,/*无引号*/
        }
    })
</script>
</html>

效果：
在这里插入图片描述
但是呢我想显示“+被触发”呢咋办这样我在

里面加上文字吗？这是不太方便的。
现在利用vue的一种新属性“methods”
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="aaa">
    <h2>当前计数:{{counters}}</h2>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
</div>
</body>
<script src="vue.js"></script>
<script>
    let abs=new Vue({
        el:"#aaa",
        data:{
            counters:0
        },
        methods: {
            add: function(){
                console.log("+被触发");/*方法通过函数来实现*/
                this.counters++;/*this指向vue对象*/
            },
            sub: function(){
                console.log("-被触发");
                this.counters--;
            }
        }
    })
</script>
</html>

效果：
在这里插入图片描述
牛逼!

小白白中之白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue日记之计数器

话不多说直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <p>当前计数:{{aaa}}</p> <button v-on:click="aaa++"
复制链接

扫一扫

专栏目录