Vue实例——计数器

最新推荐文章于 2024-05-19 19:21:07 发布

jwz934738949

最新推荐文章于 2024-05-19 19:21:07 发布

阅读量496

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/106721978

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

在Vue中，若想添加点击事件，需要使用v-on:click进行点击事件的添加。对于v-on:click，可以简写为@click。而点击事件的内容可以为具体的代码或者是函数。

在Vue中，定义函数需要new Vue()中，格式为：

methods: {

函数名: function() {

函数体

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue计数器</title>
</head>
<body>
<div id="app">
    <h1>当前计数： {{counter}}</h1>
    <!--    v-on:click代表js中的点击函数，点击之后会触发点击事件-->
    <!--    v-on:click的内容可以有两种形式：具体的代码、函数-->
    <!--    <button v-on:click="counter++">+</button>-->
    <!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    <!--    v-on:click可以简写为@click-->
    <button @click="add">+</button>
    <button @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++;
                console.log("计数器加1");
            },
            sub: function () {
                this.counter--;
                console.log("计数器减1");
            }
        }
    })
</script>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue实例——计数器

在Vue中，若想添加点击事件，需要使用v-on:click进行点击事件的添加。对于v-on:click，可以简写为@click。而点击事件的内容可以为具体的代码或者是函数。在Vue中，定义函数需要new Vue()中，格式为：methods: { 函数名: function() { 函数体 }}<!DOCTYPE html><html lang="en"><head> &l...
复制链接

扫一扫

专栏目录