---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 2 - 物件取值、Bootstrap 表單 1

物件取值
---
> 1. 物件中分為「屬性」及「值」。
> 2. 屬性為物件中的欄位名稱，而值是該屬性所代表的值。
> 3. 「屬性名稱」在運作上都是以「字串」的形式儲存，所以命名上可以使用特殊符號

在物件內新增、修改、取得屬性時最常使用的方式是「點記法」:

### 點記法（Dot notation）

let obj = {
    a: 'value A'
};
obj.$b = 'value B';  // 在物件 obj 新增一個帶有特殊符號的屬性 $b，值為 'value B'。
obj.a = 'value edit'; // 將物件 obj 屬性 a 的值修改為 'value edit'。
console.log(obj.a); // 取得物件 obj 屬性 a 的值
console.log(obj.$b); // 取得物件 obj 屬性 $b 的值

不過點記號在存取時會有一些限制。舉例來說，**當屬性名稱帶有數值、小數點、空格時，就無法正確運作**。這時就會改用「括弧記法」:

### 括弧記法（Bracket notation）

let obj = {
    a: 'value A'
};
obj['-- data'] = '雨量資料'; 
obj['PM2.5'] = 25;
obj['1b'] = '1b';
console.log(obj['-- data']) // 結果為 '雨量資料'
console.log(obj['PM2.5']) // 結果為 25
console.log(obj['1b']) // 結果為 '1b'
// 也可以代入變數
let a = 'a';
console.log(obj[a]); // 結果為 'value A'

### 題目
完成程式碼內註解要求

let c = ' 這是中文字';
let arr = {
  a: 'a',
  1: 'b',
  ' 這是中文字': 'c',
  'b': 'd',
  '--some data': 'e'
}

console.log();  // 請取得結果為 'b' 的值
console.log();  // 請取得結果為 'c' 的值，必須使用變數
console.log();  // 請取得結果為 'd' 的值，必須使用點記號
console.log();  // 請取得結果為 'e' 的值

Bootstrap 表單元素
---
- label、input
運用 .form-label、.form-control 呈現 Bootstrap 基本樣式

  <label for="mail" class="form-label">Email address</label>
  <input type="email" class="form-control" id="mail" placeholder="[e-mail]">

> 注意：
> 1. label for 與 input id 需一致
> 2. input 需運用正確的 [type 屬性](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input#form_%3Cinput%3E_types)

- select
運用 .form-select 呈現 Bootstrap 基本下拉選單樣式

  <select class="form-select" aria-label="Default select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

- checkbox & radio
運用 .form-check、.form-check-label、.form-check-input 呈現

checkbox（通常為多選）
input type 屬性需為 checkbox，可以加上 checked 屬性讓選項預設選取

  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
    <label class="form-check-label" for="flexCheckDefault">
      Default checkbox
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
    <label class="form-check-label" for="flexCheckChecked">
      Checked checkbox
    </label>
  </div>

radio（為單選）
input type 屬性需為 radio，可以加上 checked 屬性讓選項預設選取
> name 屬性的值需相同，表示為同一群組

  <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
    <label class="form-check-label" for="flexRadioDefault1">
      Default radio
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
    <label class="form-check-label" for="flexRadioDefault2">
      Default checked radio
    </label>
  </div>

詳細可以再參考：Bootstrap [表單控制](https://bootstrap5.hexschool.com/docs/5.1/forms/form-control/)、[select](https://bootstrap5.hexschool.com/docs/5.1/forms/select/)、[checks&radios](https://bootstrap5.hexschool.com/docs/5.1/forms/checks-radios/)

### 題目
請嘗試修改此 [CodePen](https://codepen.io/hexschool/pen/NWzBXON) `...` 的部分，還原成下方圖片樣式


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

// 1 方法一
console.log(arr['1']); // 請取得結果為 'b' 的值
// 1 方法二
console.log(arr[1]); // 請取得結果為 'b' 的值

// 2
console.log(arr[c]); // 請取得結果為 'c' 的值，必須使用變數
// 4
console.log(arr.b); // 請取得結果為 'd' 的值，必須使用點記號
// 5
console.log(arr['--some data']); // 請取得結果為 'e' 的值

- Bootstrap 表單 -
https://codepen.io/hexschool/pen/jOKpYXy
-->

回報區
---

| Discord |CodePen / 答案|
| ---------------- | ------------- |
|K kill9ker#8028|[CodePen](https://codepen.io/kill9ker/pen/PoaraGz)|
|Aaron Shih#3879|[CodePen](https://codepen.io/aaron00366/pen/oNyrxxK)|
| 威0#6919 | [CodePen](https://codepen.io/n0918679182/pen/NWzVJgo?editors=0012) |
| 冬天#5215 |[CodePen](https://codepen.io/winter_/pen/qBKGvVm) |
| WeiJ#7376 | [CodePen](https://codepen.io/weij0/pen/dyKErJZ) |
| Wendy3#5615 | [CodePen](https://codepen.io/wendy03/pen/YzvbgVE) |
| 薯餅#3581 | [CodePen](https://codepen.io/ColdingPoTaTo/pen/yLEWwPL) |
| albee#9121 | [CodePen](https://codepen.io/albee-chang/pen/abKrMqp?editors=1111) |
| yaru#6308 | [CodePen](https://codepen.io/lszaietc/pen/dyKErVV?editors=1011) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/JjZqKZr) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/oNyRVdo) |
|hannahTW#2224|[CodePen](https://codepen.io/hangineer/pen/VwdJvQr?editors=1010)|
| azami#5986 | [CodePen](https://codepen.io/azami/pen/ZERNPrb) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/zYaQbao?editors=1010) |
| AuroraC#6539 | [CodePen](https://codepen.io/AuroraC/pen/vYrwPzr) |
| 阿榮#8277 | [CodePen](https://codepen.io/mogzbvfl-the-reactor/pen/oNyRVqG)|
| 心幻羽#0056 | [CodePen](https://codepen.io/linglingsyu/pen/BaVeLjy)|
|Kimi#9564|[CodePen](https://codepen.io/kimihu91/pen/xxzNqzQ)|
|kenki100#0068|[CodePen](https://codepen.io/ken100/pen/LYroaMe)|
|大頭#8116|[CodePen](https://codepen.io/d22495521/pen/zYaQbgz?editors=1000)|
|楊苡安#2752|[CodePen](https://hackmd.io/ShRfxYeFSPOhWzgRFC21rg)|
| LHchien33#6232 |[CodePen](https://codepen.io/lin_chien/pen/NWzVmGP)|
| shinyhung#3825 |[CodePen](https://codepen.io/sean_1215/pen/VwdONaE?editors=1011)|
|fang#4680|[CodePen](https://codepen.io/std95174/pen/abKrxBq)|
| Eileen#6454 |[CodePen](https://codepen.io/Eileen-io/pen/vYrwMOQ)|
| PH#2731 |[CodePen](https://codepen.io/lokf9527/pen/VwdONWq)|
| jimmyFang#9575 |[CodePen](https://codepen.io/pohxiqqo/pen/oNyROpJ?editors=1010)|
|圈圈#4060|[CodePen](https://codepen.io/wjejfczn-the-bold/pen/abKrMXw)|
|mandylai#4055|[CodePen](https://codepen.io/mandy-lai-2/pen/WNyBWRr?editors=1011)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/GRGaaoZ)|
|RyanC#6960|[CodePen](https://codepen.io/RyanYD/pen/BaVeeaQ)|
|PeihanWang#2530|[CodePen](https://codepen.io/PeihanWang/pen/JjZqqJg?editors=1111)
|int#7518|[CodePen](https://codepen.io/intHuang/pen/MWXddqZ?editors=1011)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/bGKyPwm)
|艸良#2846|[CodePen](https://codepen.io/momoninainai/pen/NWzVZxO)
|masterYan#2480|[CodePen](https://codepen.io/htzwgoqt-the-looper/pen/GRGabOG?editors=1111)|
|RJRS#9430|[CodePen](https://codepen.io/RJRS/pen/GRGabvd)|
|IreneY#0086|[CodePen](https://codepen.io/HalfPlannedJourney/pen/gOKJVbE)|
|Potatolee#7749|[CodePen](https://codepen.io/potatoleee/pen/poKmMbE?editors=1011)|
|出事了阿伯#9923|[CodePen](https://codepen.io/BradpittLai/pen/xxzNvEY?editors=1010)|
|Jill Lee #0809|[CodePen](https://codepen.io/chi-ling-lee/pen/gOKNYww?editors=1111)|
|CatBoxy#4207|[CodePen](https://codepen.io/nekoboxy/pen/abKrrVg?editors=0010)|
|Alex#9978|[CodePen](https://codepen.io/datsxzqg-the-selector/pen/xxzoKmb?editors=1011)|
|Tunafin#5340|[CodePen](https://codepen.io/tunafin/pen/poKXzXG)|
|Benson#6763|[CodePen](https://codepen.io/kumashow/pen/abKgbNd)|
|泊岸#3466|[CodePen](https://codepen.io/qoq77416416/pen/eYKwOgP?editors=1011)|
|小夜#3809|[CodePen](https://codepen.io/Naito_K/pen/wvXLwVj?editors=1001)|
|Fannie#7800|[CodePen](https://codepen.io/dgltu/pen/QWxXwwb?editors=1011)|
|鑫鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/vYrqOmL?editors=1011)|
|AkiHico#9239|[CodePen](https://codepen.io/akihico/pen/bGKPGdj?editors=1010)|
|小木馬#8760|[CodePen](https://codepen.io/wmmtbcsd/pen/rNKEVRE)|
|魚子醬#5220|[CodePen](https://codepen.io/haihsuan/pen/poKXjjY)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/rNKEVbE)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/vYrqNdd?editors=1010)|
|Jamie Wu#9345|[CodePen](https://codepen.io/Wu220103/pen/QWxXjPL)|
| cbs#9007 |[CodePen](https://codepen.io/wasdjk/pen/poKXzaZ)|
| RainJ#3480 |[CodePen](https://codepen.io/RainJCode/pen/NWzZxmb?editors=1111)|
| Barret#1119 |[CodePen](https://codepen.io/barret0720/pen/yLEdOYv?editors=0011)|
|sherlin#4587|[CodePen](https://codepen.io/sherlinKuo/pen/bGKPpvY?editors=1011)|
|aki|[CodePen](https://codepen.io/aki168/pen/dyKBPqr)|
|Ron Liang#7277|[CodePen](https://codepen.io/ron-go/pen/qBKzNXR)|
|Doris Li#2096|[CodePen](https://codepen.io/ping-lee/pen/poKXymq?editors=1010)|
|JimmyChang#5558|[CodePen](https://codepen.io/JimmyChangWenChi/pen/XWYLKam?editors=1010)|
|布魯諾#7239|[CodePen](https://codepen.io/hexschool/pen/NWzBXON?editors=1010)|
|Asher Xu#7239|[CodePen](https://codepen.io/kirakira72/pen/jOKjqge)|
|Natsuki#9555|[CodePen](https://codepen.io/tinawang722/pen/abKgmby?editors=1010)|
|yuling#1634|[CodePen](https://codepen.io/igzdflpu/pen/MWXMeqw)|
|Hironaka#7367|[CodePen](https://codepen.io/Hironaka0815/pen/dyKBpye?editors=1011)|
|Austyn#0949|[CodePen](https://codepen.io/fish90547/pen/MWXMjop?editors=1111)|
|Bella_#1587|[CodePen](https://codepen.io/Chen-Bella/pen/rNKELZe)|
|xin_#1214|[CodePen](https://codepen.io/SiaoYao/pen/wvXLzEM)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/LYrKbYv?editors=1111)|
|SASIMI#5099|[CodePen](https://codepen.io/sashimi1327/pen/BaVgQzp)|
|Mia小福#4473|[CodePen](https://codepen.io/a0950271/pen/YzvopZX)|
|竹輪#3335|[CodePen](https://codepen.io/chikuwa0120/pen/KKejNBB)|
|ssozr#4680|[CodePen](https://codepen.io/ssozr/pen/YzvoXQy?editors=1011)|
|JY#5712|[CodePen](https://codepen.io/judychang789/pen/jOKjVge)|
|DIO大人#4776|[CodePen](https://codepen.io/oscar-2283/pen/ZERdLbd)|
|yoyo123456#0577|[CodePen](https://codepen.io/hungyoyo/pen/dyKBOrX?editors=0011)|
|ABOOS#6276|[CodePen](https://codepen.io/guhungyin/pen/BaVgwBz)|
|ㄚ翔#8126|[CodePen](https://codepen.io/engineerjohnson/pen/VwdJXzW)|
|大衛#4869|[CodePen](https://codepen.io/exnsrpjc/pen/rNKEKNv?editors=0011)|
|Knock59487#9114|[CodePen](https://codepen.io/Zack88/pen/NWzZzxp?editors=1111)|
|RainLiao#2616|[CodePen](https://codepen.io/billpop741/pen/WNyqKbK)|
|阿沁#8176|[CodePen](https://codepen.io/a8322342/pen/LYrKBZZ)|
|Yuna Huang#2692|[CodePen](https://codepen.io/Yuna1002/pen/VwdJBvm)|
|小天#7177|[CodePen](https://codepen.io/linyujing/pen/abKgPKY?editors=1111)|
|danny123|[CodePen](https://codepen.io/binlandz123/pen/QWxXPjL?editors=1012)|
|無名#6427|[CodePen](https://codepen.io/Nomoney/pen/PoavJzp)|
|Cream#3449|[CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/RwJzOMd?editors=1011)|
|狸貓#5863|[CodePen](https://codepen.io/tanuki320/pen/OJEeYxb?editors=1010)|
|Yishan#4902|[CodePen](https://codepen.io/gdjrehhw-the-animator/pen/QWxeEjx?editors=1010)|
|柔柔#1716|[Codepen](https://codepen.io/rouchen/pen/LYrwZzR?editors=1111)|
|米米#1824|[Codepen](https://codepen.io/Jameshsu0407/pen/KKeOMRY)|
|helena#8461|[Codepen](https://codepen.io/helena27/pen/gOKVMze?editors=1012)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/qBKergy)|
|enolachen#8031|[Codepen](https://codepen.io/Chen-Enola/pen/GRGVNeN)|
|老皮博士#8050|[Codepen](https://codepen.io/li0406/pen/XWYvexy?editors=1111)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/oNyKqKw?editors=1111)|
| 柚子#3958 | [Codepen](https://codepen.io/as6625998/pen/OJEKZKJ?editors=1011) |
| Hsiu#8767 | [Codepen](https://codepen.io/amy-hsiu/pen/VwdodPO) |
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/JjZgxZz?editors=0011) |
| GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922 | [Codepen](https://codepen.io/sho666/pen/poKMvJv?editors=1111) |
| kuku#3118 | [Codepen](https://codepen.io/mengting-ku/pen/OJEKGwY) |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/YzvmMaj?editors=1011) |
| Chaya#3412 | [Codepen](https://codepen.io/ChiaoJiao/pen/rNKXEjb?editors=1112) |
| 阿蘇#8531 | [Codepen](https://codepen.io/susu3131/pen/rNKXEeR?editors=0010) |
| Bassjim#0118 | [Codepen](https://codepen.io/unrtxbaq/pen/bGjbdOq) |
| Tuhacrt#0008 | [codepen](https://codepen.io/Tuhacrt/pen/mdjbMGz) |
| How#5806 | [codepen](https://codepen.io/howtobefine/pen/GRBKxYv) |
| 雞腿#6089 | [codepen](https://codepen.io/C-WEi/pen/dyjbKdr) |
| 喬喬#2824 | [codepen](https://codepen.io/joanne-wei/pen/poZzYbL) |
| Winnie#1306 | [Codepen](https://codepen.io/WinnieWuWinnie/pen/KKBPOmj?editors=0011) |
| shiuan#4721 | [Codepen](https://codepen.io/prankaChang/pen/JjZgPGw) |
| KC_8685#9343 | [Codepen](https://codepen.io/cathy7411/pen/JjBjRME) |
| yoyo#1003 | [Codepen](https://codepen.io/pen/OJwJReq) |
| 949cat 𓃠#2154 | [codepen](https://codepen.io/Ariel_Chen/pen/NWBWjeR) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/mdjdqPe) |
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/PoBoxmG)|
|Jeff#6077|[Codepen](https://codepen.io/nonwaaa/pen/jOpOQzZ?editors=1111)|
|Tami#6742|[Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/WNKNWog)|
|Rita916#4384|[Codepen](https://codepen.io/rita0916/pen/jOpEyJz?editors=0010)|
|MingJuan#0071|[Codepen](https://codepen.io/M-Juan/pen/oNMgWRQ)|
|ViNci#4273|[Codepen](https://codepen.io/ViNciSyo/pen/NWBPZXd)|
|Chole#1041|[Codepen](https://codepen.io/LinChole/pen/LYBVPEy)|
| yummyniya#7185 | [Codepen](https://codepen.io/yummyniya/pen/gOGoZOb)|
| wen#2289 | [Codepen](https://codepen.io/bfvnyzol-the-typescripter/pen/ExpjYdv)|
|你看我像是會玩嗎#1866 | [Codepen](https://codepen.io/hasagg/pen/VwBLpKe)|
|kevin8349#6131 | [Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/XWBbaNG?editors=1011)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/zYLGjBb)|
|Silvialu#4521|[codepen](https://codepen.io/Silvia091640/pen/LYBEBJK)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/KKBpOrG)|
|FiReBrO#0557|[codepen](https://codepen.io/firebro42/pen/poZjzNX)|
|k.sin#3115|[codepen](https://codepen.io/sin588/pen/xxJwGdE?editors=1010)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/MWBaOmJ)|
|ChloeLo#4858|[CodePen](https://codepen.io/chloelo/pen/BaPorXK)|
|Wei#2330|[Codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/NWBGMYw)|
|popcorn_3q#9893|[Codepen](https://codepen.io/arnyrpqt-the-sasster/pen/jOpbxMG)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/VwBvJxV)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/OJEeYxb)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/abjdVGV?editors=1011)|
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/MWBKPXM?editors=1111)|
|大大#5164|[CodePen](https://codepen.io/gzonothk-the-looper/pen/MWBKMJa?editors=1011)|
|Ringo#7583|[CodePen](https://codepen.io/ringolai1988/pen/zYLqKLJ?editors=1010)|
|Wendy77#8049|[Codepen](https://codepen.io/Wendy__/pen/ZEjWvGK)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/RwBRayo?editors=1011)|
|Cookie SSS#6991|[Codepen](https://codepen.io/sqhjikpa-the-selector/pen/XWBKOdB?editors=1010)|
|Keep#4336|[Codepen](https://codepen.io/keep-/pen/GRBjGJK?editors=1010)|
|阿異#4776|[CodePen](https://codepen.io/yani21399/pen/dyjOJbW)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/yLqMMOG)|
| YU#0618 | [Codepen](https://codepen.io/yoken_/pen/MWBpNzM?editors=1010) |
| 周周#3503 | [Codepen](https://codepen.io/jhoujhou-the-decoder/pen/ZEjRemd) |
|Jujubeleven#1036|[Codepen](https://codepen.io/jujubeleven/pen/MWBPWBj?editors=1010)|
|Velma#1693|[Codepen](https://codepen.io/Ze1225/pen/WNKLebR?editors=1010)|