vue_03_计数器案列

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

Abdullahi_kanye

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

阅读量331

点赞数

分类专栏： vue专栏

本文链接：https://blog.csdn.net/Abdullahi_kanye/article/details/103003190

版权

vue专栏专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、较简单的一种

1、代码

使用点击事件 v-on:click指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 准备一个div标签，并将此挂载到vue实例中去 -->
    <div id="app">
        <h1>当前计数：{{counter}}</h1>
        <!-- 定义加和减两个按钮 
        v-on：click 表示监听一个click点击事件。然后执行对应的方法或者一个函数。这里就是拿到变量counter进行++和--的响应式操作
        -->
        <button v-on:click='counter++'>+</button>
        <button v-on:click='counter--'>-</button>
    </div>
    <!-- 先引入vuejs文件 -->
    <script src="../js/vue.js"></script>
    <script>
        //创建一个new实例
        const app=new Vue({
            el:'#app', //通过id来挂载上div标签
            data:{
                // 定义一个变量
                counter:0
            }
        })
    </script>
</body>
</html>

2、展示效果图

在这里插入图片描述

3、直观代码截图

在这里插入图片描述

二、较高深的一种方式

使用vue实例中的methods属性，可以在其中定义很多方法

1、代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 准备一个div标签，并将此挂载到vue实例中去 -->
    <div id="app">
        <h1>当前计数：{{counter}}</h1>
        <!-- 定义加和减两个按钮 
        v-on：click 表示监听一个click点击事件。然后执行对应的方法或者一个函数。这里就是拿到变量counter进行++和--的响应式操作
        -->
        <!-- 第一种方式：较直观  
        <button v-on:click='counter++'>+</button>
        <button v-on:click='counter--'>-</button> 
         -->

         <!-- 新的指令@click，也就是v-on:click，用于监听某个元素的点击事件，当发生点击时执行方法（通常是methods属性中定义的方法） -->
         <!-- v-on:click的语法糖（简写）就是@click -->
         <button v-on:click="add">+</button>
         <button @click="subtraction">-</button>
    </div>
    <!-- 先引入vuejs文件 -->
    <script src="../js/vue.js"></script>
    <script>
        //创建一个new实例。可以定义el/data/methods，当然还有很多，之后会一一解开
        const app=new Vue({
            el:'#app', //通过id来挂载上div标签
            data:{
                // 定义一个变量
                counter:0
            },
            //新的属性methods，改属性用于在vue中定义方法
            methods:{//在vue实例中定义个methods对象，可以在里面定义很多的函数
                add:function(){//定义一个add的函数类型：按钮的增加操作
                    console.log('执行add增加操作');
                    this.counter++ //this指当前对象(想用methods外的变量，就用当前this.变量)；
                                   //然后拿到当前vue对象中的counter变量进行操作
                },
                subtraction:function(){//再定义一个subtraction函数：按钮的减少操作
                    console.log('执行subtraction减少操作');
                    this.counter--
                }
            }
        })
    </script>
</body>
</html>