vue学习-03-vue案例-计数器 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h2>当前计数：{{number}}</h2>
            <!-- <button type="button" v-on:click="number++">+</button>
            <button type="button" v-on:click="number--">-</button> -->
            <button type="button" v-on:click="add">+</button>
            <button type="button" @click="sub">-</button>
        </div>
    </body>
</html>
<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // let(变量)const(常量)
    // 语法糖：简写@click就算v-on:的简写
    const app = new Vue({
        el:'#app',//决定vue挂载到哪个对象
        data:{
            number:0
        },
        methods:{
            add:function(){
                this.number++;
            },
            sub:function(){
                this.number--;
            }
        }
    })
</script>

 

posted @ 2020-06-04 17:01  神女卑弥呼  阅读(68)  评论(0)    收藏  举报