架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

Vue小案例:实现一个简单的计数器功能

架构师小跟班 2020-04-30 前端别闹
案例:1、页面显示一个数字和两个按钮(+)和(-)2、点击(+)按钮,数字+1,点击(-)按钮,数字-1思路:定义一个变量counter,点击事件触发时加减值。源码:<div id="app"> <h1>当前数字为:{{counter

案例:

1、页面显示一个数字和两个按钮(+)和(-)

2、点击(+)按钮,数字+1,点击(-)按钮,数字-1

思路:

定义一个变量counter,点击事件触发时加减值。

源码:

<div id="app">
    <h1>当前数字为:{{counter}}</h1>
    <!--直接写-->
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
    <!--封装成方法-->
    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                this.counter++
            },
            sub: function () {
                this.counter--
            }
        }
    })
</script>


文章评论