计算机网络/计算机科学与应用/系统/运维/开发

3、Vue 计数器


    <div id="app">
            <h2>当前计数:{{counter}}</h2>
            <!-- <button v-on:click="counter++">+</button>
            <button v-on:click="counter--">-</button> -->
            <!-- v-on指令 -->
            <button v-on:click="add">+</button>
            <!-- @click 语法糖 -->
            <button @click="sub">-</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script type="text/javascript">
            // 声明式编程
            let app = new Vue({ // 挂载管理的元素
                el:"#app",
                data:{// 定义数据
                    counter:0
                },
                methods:{ // 定义方法
                    add:function(){
                        this.counter++
                    },
                    sub:function(){
                        this.counter--
                    }
                }
            })
        </script>


生活的强者,不是指能搞定一切困难,也不是指没有恐惧,而是就算心里藏着无尽的疲惫和委屈,还是会认真地做好手头上的事情;就算自己被生活锤得心灰意冷,还是会尽心尽力地负起责任;就算发现现实与理想的差距有十万里,虽然鞭长莫及,却依然马不停蹄。

评论

^