tft每日頭條

 > 生活

 > 計數器簡易圖

計數器簡易圖

生活 更新时间:2025-02-13 23:29:55

計數器簡易圖?<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>當前計數:{{counter}}</h2> <!-- <button v-on:click="counter "> </button> --> <!-- <button v-on:click="counter--">-</button> --> <button v-on:click="add"> </button> <button @click="sub">-</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add: function () { console.log("add被執行"); this.counter ; }, sub: function () { console.log("sub被執行"); this.counter--; } } }) </script> </body> </html>,我來為大家講解一下關于計數器簡易圖?跟着小編一起來看一看吧!

計數器簡易圖(案例計數器)1

計數器簡易圖

案例:計數器
  • 現在,我們來實現一個小的計數器
    • 點擊+計數器 1
    • 點擊-計數器-1
  • 這裡,我們又要使用新的指令和屬性了
    • 新的屬性:methods,該屬性用于在Vue對象中定義方法。
    • 新的指令:@click,該指令用于監聽某個元素的點擊事件,并且需要指定當發生點擊時,執行的方法(方法通常是methods中定義的方法)
  • 你可能會疑惑?
    • 這些@click是什麼東西?
    • Vue對象中又是定義el/data/methods,到底都有哪些東西可以定義,以及它們的作用是什麼?
    • 這些疑惑在後續學習中都會一一解開。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h2>當前計數:{{counter}}</h2> <!-- <button v-on:click="counter "> </button> --> <!-- <button v-on:click="counter--">-</button> --> <button v-on:click="add"> </button> <button @click="sub">-</button> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { counter: 0 }, methods: { add: function () { console.log("add被執行"); this.counter ; }, sub: function () { console.log("sub被執行"); this.counter--; } } }) </script> </body> </html>

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved