Vue P8 —— 计数器升级版

原创于 2020-05-05 10:54:15 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用Vue.js框架创建一个简单的点赞和踩功能。通过HTML、JavaScript和Vue.js的结合，实现了用户可以点击图片进行点赞或踩，并实时更新显示点赞和踩的数量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <img src="image/dislike.png" @click="changeDislike">
            <span>{{dislike}}</span>
        </div>
        <div>
            <img src="image/like.png" @click="changeLike">
            <span>{{like}}</span>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el : "#app",
            data:
            {
                dislike:1,
                like:1,
                
            },
            methods:
            {
                changeDislike:function()
                {
                    this.dislike++;
                },
                changeLike:function()
                {
                    this.like++;

                },
                
            }
        })

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