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

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>


只有惜缘,才有缘分;只有惜友,才有友谊。

评论

^