Vue.js

Vue——计数器开发案例

2021-09-07 11:31发布

站内文章 / Vue.js
739 0 0

一丶案例代码


<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <h2>当前计数：{{counter}}</h2>


<!--    <button v-on:click="counter++">+</button>-->

<!--    <button v-on:click="counter--">-</button>-->

    <!--如果还需监听，打印语句，那么继续写入上述语句就会显得很复杂，所以我们不妨封装一个函数-->


    

    <button v-on:click="add">+</button>

    <button v-on:click="sub">-</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    //<button v-on:click="add">+</button>

    //上述可简写成<button @click="add">+</button>

    const app =new Vue({

        el:"#app",

        data:{

            counter:0

        },

        //定义方法，可以有很多个函数

        methods:{

            //定义加法  可以简写成add(){}

            add:function (){

                console.log("add被执行");

                //如果直接counter++，系统是找不到counter这个元素的，它会第一时间去找全局变量

                //可以用app.counter来获取counter，但是不建议，用this会更好

                this.counter++

            },


            //定义减法 

            sub:function (){

                console.log("sub被执行");

                this.counter--

            }

        }


    })

    //命令式：

    //1.拿button元素

    //2.添加监听事件

</script>

</body>

</html>


二丶运行结果

在这里插入图片描述


三丶Console交互式响应

在这里插入图片描述在这里插入图片描述在这里插入图片描述