VUE案例-做一個計算器
阿新 • • 發佈：2021-03-12
在學習過程中有很多問題：
1.佈局，浮動。以最後一個為主。同一排元素abc都設定了float：right，c會排第一個。
2.按鈕點選過後有一個黑色邊框線，需要預設樣式。
/*取消button點選的預設樣式*/
button:focus{
border:0none;
outline:none;}
3.操作物件的裡面資料的時候 需要用this這個。
4.程式碼書寫規則問題，物件的多個變數要用逗號“，”隔開。
總結：忘記了很多前面學習的HTML CSS JS的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } #jisu { padding-top: 60px; padding-left: 100px; height: 30px; width: 122px; } button { float: left; height: 100%; width: 40px; background: rgb(226, 226, 226); border: 0px; border: 0 none; } /*取消button點選的預設樣式*/ button:focus { border: 0 none; outline: none;} span { float: left; height: 28px; width: 40px; border: 1px solid rgb(226, 226, 226); text-align: center; line-height: 30px; } </style> </head> <body> <div id="jisu"> <button @click="sub">-</button> <span>{{num}}</span> <button @click="add">+</button> </div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script> <script> var app = new Vue({ el: "#jisu", data: { num: 1 }, methods: { add: function () { this.num++;//這裡要操作data的資料，要記得選中要用this。 }, sub: function () { this.num--; } }, }) </script> </html>