[Vue基础实战]加减演练

参考代码:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Auto Add or Sub</title>      
    </head>
    <body>
        <div id="app">
            <button @click="autoSubtract">-</button>
            <input type="text" v-model="number" />
            <button @click="autoAdd">+</button>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                   number: 0
                },
                methods: {
                    autoAdd() {
                        this.number++;                       
                    },
                    autoSubtract(){
                        this.number--;
                    }
                },
            });
        </script>
    </body>
    </html>

 

posted @ 2021-01-15 09:21  dshow  阅读(74)  评论(0)  编辑  收藏  举报