---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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 / 答案|
| ---------------- | ------------- |
| elena | [CodePen](https://codepen.io/elena0127abc/pen/abMoooP) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/oNmKmdb?editors=1011) |
| pingshian | [CodePen](https://codepen.io/pingshian0131/pen/OJdKdvj) |
| kuanju27 | [CodePen](https://codepen.io/Eero-Chiao/pen/MWLNLrz) |
| 圈圈 | [CodePen](https://codepen.io/wjejfczn-the-bold/pen/mdvNvQm?editors=1111) |
| pinyi_9 | [CodePen](https://codepen.io/Wpypy/pen/PoVMVyJ?editors=1111) |
| carriet 🍄 |[CodePen](https://codepen.io/echocarriet/pen/wvNVNOm)
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/MWLNLxx) |
| Eden | [Codepen](https://codepen.io/iseden/pen/bGzXZVx) |
| FangFang | [Codepen](https://codepen.io/FangFang09/pen/ExrqMPP) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/XWOvGmJ) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/rNPXRGx) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/gOqVERK?editors=1012) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/rNPXRjV) |
| ryan.chou | [CodePen](https://codepen.io/csw8524/pen/BaMXbmG) |
haru | [CodePen](https://codepen.io/haru_portfoilo/pen/dyaxrRz) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/ZEwgPWz) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/abXeMKJ) |
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/vYboPdR?editors=1000) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/eYxqopv?editors=0011) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/WNPVWGQ) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/WNPVWjw) |
| Yang | [CodePen](https://codepen.io/Yang-J/pen/ZEwgZJJ?editors=1010) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/RwvzKZe)
| ChrisSQR | [CodePen](https://codepen.io/ChrisSQR/pen/mdvNozG)
| Emily | [CodePen](https://codepen.io/Emily2089/pen/oNmKOPV) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/JjxgqdV?editors=1011) |
| adonis | [CodePen](https://codepen.io/adonismis/pen/LYqwoeE?editors=1111) |
| hedy_h | [CodePen](https://codepen.io/Hedy_H/pen/LYqwoWP) |
| hua | [CodePen](https://codepen.io/LHua/pen/eYxqaQo?editors=1111) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/YzBmorY) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/xxMvoWq?editors=1010) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/jOdggLM) |
| celinelinnn |[CodePen](https://codepen.io/celinephoebe/pen/LYqwwxB)|
| Winnie |[CodePen](https://codepen.io/codepen-io-winnie/pen/mdvNZvz?editors=1011)|
|yuling|[codepen](https://codepen.io/igzdflpu/pen/wvNVVzv)|
|Helen|[codepen](https://codepen.io/milkteamonster/pen/vYboogb)|
| dora | [CodePen](https://codepen.io/dorayu/pen/JjxgzBJ) |
| Martin | [CodePen](https://codepen.io/markyourpage/pen/GReKKJo) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/zYbOOwb) |
| fanshu0303 | [CodePen](https://codepen.io/JuiHsuanLee0303/pen/gOEYYbr) |
| Bin | [CodePen](https://codepen.io/binbro708/pen/LYaPYER) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/poYzoxv) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/jOdggXm?editors=1010) |
|Moreene|[CodePen](https://codepen.io/Moreene/pen/XWGrryL)|
| Chris | [CodePen](https://codepen.io/cjtseng07/pen/JjzPjzr) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/LYaPEVd?editors=1012) |
|荷菓かのり| [CodePen](https://codepen.io/oogxwkvw-the-builder/pen/wvOwBBV) |
|ann6212| [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/JjzPoJZ?editors=1111) |
| alice | [CodePen](https://codepen.io/Alice-Lee-the-solid/pen/GReKgjL?editors=1111) |
| \_amaaaa | [CodePen](https://codepen.io/Alicia-Chu/pen/LYaPEXq) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/JjzPogx) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/JjzPdPx?editors=0010) |
| c8529 | [CodePen](https://codepen.io/claire210401/pen/bGvmyza?editors=1010) |
| Enzo | [CodePen](https://codepen.io/Enzo-Lo/pen/GReKJrq) |
| Lobinda | [CodePen](https://codepen.io/Lobinda/pen/OJqLVXb) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/VwRZYNJ) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/XWGrmeX) |
| BUG | [CodePen](https://codepen.io/BUG-the-sans/pen/mdobeZz) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/MWxgKjJ?editors=1111) |
| cest_jessie | [CodePen](https://codepen.io/itsjessiechen/pen/jOdgdxp) |
| nini1202desu | [CodePen](https://codepen.io/tvxq5206/pen/abModvL?editors=1011) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/xxBKZpz)|
| Mattie | [CodePen](https://codepen.io/mattielin/pen/YzgKqKK) |
| cbs |[Codepen](https://codepen.io/wasdjk/pen/poYzgGr)|
| Ataraxia |[Codepen](https://codepen.io/ataraxia8888/pen/oNVvzZM)|
| 教練 |[Codepen](https://codepen.io/monkeybear721/pen/OJqLWQo)|
| 黃士桓 | [codePen](https://codepen.io/shr-huan-huang/pen/rNRBjgM) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/KKEPPWo) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/PoLYpoL?editors=1010) |
| yahan87097 | [Codepen](https://codepen.io/sakana0830/pen/RwdbVww)|
| Leo | [Codepen](https://codepen.io/Aruminiya/pen/mdobWXY)|
| MDFK | [Codepen](https://codepen.io/maywang/pen/eYxqamj?editors=1001)|
| Sabrina | [Codepen](https://codepen.io/SabrinaGuo/pen/QWoLveV)|
| PayRoom | [CodePen](https://codepen.io/water38198/pen/JjzPJpE)|
| RayRay | [CodePen](https://codepen.io/CityRay/pen/jOJNwVd)|
| PoRay | [CodePen](https://codepen.io/raycheng/pen/ZEPzJwa) |
| Ivy | [CodePen](https://codepen.io/yi-hua-lin/pen/JjzPrRV) |
| Oria | [CodePen](https://codepen.io/kajing/pen/OJqLXeq?editors=1001) |
| Neil | [CodePen](https://codepen.io/Neil1024/pen/OJqLOxw?editors=1011) |
| 翔.(Ben) | [CodePen](https://codepen.io/energy95272z/pen/JjzPMGO?editors=1111) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/yLwBjqM) |
| _shun0130 | [CodePen](https://codepen.io/koba60052ww/pen/GReKGRg?editors=0010) |
| Elio | [CodePen](https://codepen.io/Elio_TYC/pen/LYaPazb) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/QWoWWqz) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/gOEOLXr) |
| Peng | [CodePen](https://codepen.io/H-Peng/pen/jOJOVwL?editors=1011) |
| joy-chiang | [CodePen](https://codepen.io/dcthmcje-the-reactor/pen/mdodmor?editors=1010) |
| jenniferchuang | [CodePen](https://codepen.io/yujhen/pen/ZEPEjWw?editors=1111) |
| yuli | [CodePen](https://codepen.io/qlmjined-the-typescripter/pen/poYoGxa) |
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/yLwyLrd) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/RwdNwdL) |
| Jim | [CodePen](https://codepen.io/asiahedh-the-encoder/pen/ZEPYGGy) |
| Yuetin | [CodePen](https://codepen.io/Yue9527/pen/bGZNppV) |
| WEI | [CodePen](https://codepen.io/wei-z/pen/xxBbqrq) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/poYvPwP?editors=1011) |
| ⭐️小正 | [CodePen](https://codepen.io/colorgolden/pen/gOEbXgm?editors=1011) |
| WA | [CodePen](https://codepen.io/ldddl/pen/bGZNabx?editors=0011) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/MWxYrKg?editors=1010) |
Yang | [CodePen](https://codepen.io/hike1707/pen/dyrPKbj)
| aaron | [CodePen](https://codepen.io/nzygxhnl-the-scripter/pen/XWGJYaZ)
| lxokine | [CodePen](https://codepen.io/iqqdmhtf-the-builder/pen/wvOBXZo)
| macihuang | [CodePen](https://codepen.io/macy1215/pen/RwdNvzN)
| 柚子 | [CodePen](https://codepen.io/as6625998/pen/GRegLew?editors=1011)
| adam322 | [CodePen](https://codepen.io/hexschool/pen/NWzBXON)
| 保羅 | [CodePen](https://codepen.io/paul-1997/pen/BabNpaL)
| sponge | [CodePen](https://codepen.io/biunpujm-the-flexboxer/pen/vYPOpeW)
| PoWei#8484 | [CodePen](https://codepen.io/harrison-wei-lai/pen/MWxwLME)
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/oNVXmMa?editors=1010) |
| Ting | [Codepen](https://codepen.io/liara/pen/JjzYEMV)|
| Iris | [Codepen](https://codepen.io/iris831206/pen/rNROyqV)|
| xuan | [Codepen](https://codepen.io/xuan0915/pen/qBvOjXv?editors=1011)|
| Vivian | [Codepen](https://codepen.io/vivian_lin/pen/yLwYgpv)|
| peggy | [CodePen](https://codepen.io/peggylai/pen/rNROdeJ?editors=1011) |
| owen | [CodePen](https://codepen.io/owen-dong/pen/XWGmxzM?editors=1111) |
|　Nielsen | [Codepen](https://codepen.io/nielsen_dch/pen/abMvMXM)|
| Jason | [CodePen](https://codepen.io/bfnrjakt/pen/yLwYWxJ) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/eYXJbex?editors=1011) |
| zona | [CodePen](https://codepen.io/w242920/pen/qBvbwZz) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/JjzGQBm) |
| samgu666 | [CodePen](https://codepen.io/orz311013/pen/bGZwRVQ) |
| 關關 | [CodePen](https://codepen.io/ashkuan/pen/MWxbYQo?editors=1111) |
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/wvOoOpE) ||
| JasonFu | [Codepen](https://codepen.io/jie-Fu/pen/oNVByav?editors=0111) ||
| shuuu | [Codepen](https://codepen.io/jybvfzos-the-bashful/pen/WNmpoNr?editors=1011) ||
| 郭芙蘭| [Codepen](https://codepen.io/flora_Kuo/pen/PoLOLGx?editors=1011) ||

<!-- 快速複製
| | [CodePen]() |

-->