03-计数器案例

最新推荐文章于 2024-05-14 18:03:07 发布

plan_ b

最新推荐文章于 2024-05-14 18:03:07 发布

阅读量184

点赞数

分类专栏： vue框架学习和项目常见问题

本文链接：https://blog.csdn.net/plan_jok/article/details/112855405

版权

vue框架学习和项目常见问题专栏收录该内容

23 篇文章 0 订阅

订阅专栏

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
<div id="app">
    <h2>{{counter}}</h2>
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
    })
</script>
</html>

以上情况不推荐使用

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
<div id="app">
    <h2>{{counter}}</h2>
    <button v-on:click=add>+</button>
    <button @click="sub">-</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                console.log('+')
                this.counter++
            },
            sub: function () {
                console.log('-')
                this.counter--
            }
        }
    })
</script>
</html>

推荐使用，其中v-on：等效于@，@是v-on的语法糖

plan_ b

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03-计数器案例

示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计数器</title></head><body><div id="app"> <h2>{{counter}}</h2> <button v-on:click="counter++">
复制链接

扫一扫

专栏目录