vue 计数器按按钮加以或减一

最新推荐文章于 2024-04-02 04:07:33 发布

grt要一直一直努力呀

最新推荐文章于 2024-04-02 04:07:33 发布

阅读量1.9k

点赞数

分类专栏：前端入门文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/qq_44870115/article/details/118579640

版权

前端入门专栏收录该内容

26 篇文章 1 订阅

订阅专栏

监听事件用v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实例计数器</title>
</head>
<body>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
        <!-- 表示监听的为click事件,监听到事件后 执行后面的响应 counter++ -->
        <button v-on:click='counter++'>+</button>
        <button v-on:click='counter--'>-</button>
        <ul>
            <li v-for='item in fruits'>{{item}}</li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                counter:0,
                fruits: ['apple','orange','banana','grape']
            }
        })
    </script>
</body>
</html>

也可以对button那里处理，也可以在vue里面定义函数方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实例计数器</title>
</head>
<body>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
        <!-- 表示监听的为click事件,监听到事件后 执行后面的响应 counter++ -->
        <button v-on:click='add'>+</button>
        <button v-on:click='sub'>-</button>
        <ul>
            <li v-for='item in fruits'>{{item}}</li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data:{
                counter:0,
                fruits: ['apple','orange','banana','grape']
            },
            methods:{
                add:function(){
                    console.log('add被执行');
                    this.counter++
                // counter前加上this，否则找不到counter
                },
                sub:function(){
                    console.log('sub被执行')
                    this.counter--
                }
            }
        })
    </script>
</body>
</html>

grt要一直一直努力呀

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue 计数器按按钮加以或减一

监听事件用v-on<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫