---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 2
###### tags: `Vue 直播班 - 2022 春季班`

物件取值
---
> 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'

題目(請使用 CodePen 作答)
---

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/Bingbingboom/pen/eYEwaRm) `...` 的部分，還原成下方圖片樣式


回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答
// 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/Bingbingboom/pen/RwZzmrZ
-->

回報區
---
| 報數 |組別/名字 | codepen / 其他回饋 |
| -------- | -------- | -------- |
|1|Karen Huang|https://codepen.io/Coding_Snorlax/full/WNZEPBG |
|2|Iris Huang|https://codepen.io/ythuang/pen/wvrpPLG |
|3| POPEYE | https://codepen.io/popeye_ux/pen/WNZdXBo |
|4|肉鬆|https://codepen.io/klrkicog/pen/YzrYYXm?editors=1011 |
|5| John Lu | https://codepen.io/jiangshuuu/pen/NWaXXWb |
|6|Sheep|https://codepen.io/SheepNDW/pen/mdBppdd |
|7|kevinhes|https://codepen.io/kevinhes/pen/ExwooVd?editors=1111|
|8|浩|https://codepen.io/Ahoyyyy/pen/oNGporV?editors=1010 |
|9|王老明|https://codepen.io/adonismis/pen/qBPppYW?editors=1011 |
|10|Laura|https://codepen.io/minminn/pen/QWqaawv |
|11|Jason Chen|https://codepen.io/jason60810/pen/GRMyyXr |
|12|BeanHuang|https://codepen.io/Beanhuang/pen/QWqaaYr?editors=1011 |
|13|Jhen|https://codepen.io/cheng-jhen/pen/xxXppNx|
|14|Yunei|https://codepen.io/Yunei/pen/YzrYYBW|
|15|AllenW|https://codepen.io/AllenW/pen/JjrMMrq|
|16|Howard|https://codepen.io/yawdnhbm/pen/VwMyQLm|
|17|威爾|https://codepen.io/WILL_Wu/pen/dyVJdXO|
|18|Judy|https://codepen.io/judy86101166/pen/eYGyVpw|
|19|黑川|https://codepen.io/kurokawa/pen/jOGYYJK|
|20|Pei Ying|https://codepen.io/Pei-Ying/pen/poWpazQ?editors=1011|
|21|Anna|https://codepen.io/kycrleao/pen/mdBpXBp?editors=1011|
|22|Arista|https://codepen.io/arista-hsieh/pen/qBPpxYr|
|23|Gill|https://codepen.io/Gill-Chin/pen/KKXZQRj?editors=1011|
|24|Tim Lin|https://codepen.io/TimmyLin/pen/MWErVpb|
|25|Clara Cai|https://codepen.io/Clara-Snowy/pen/GRMyxqP|
|26|Wilson|https://codepen.io/ittaxcjv-the-reactor/pen/bGoavrG?editors=1001
|27|Charlotte Lee|https://codepen.io/charlotte-lee/pen/ExwoEPX?editors=1010
|28|andersonshen|https://codepen.io/luxyenni-the-bold/pen/QWqamqy
|29|Liu|https://codepen.io/feng-chi-liu/pen/vYepRQM?editors=1010 |
|30|kk|https://codepen.io/potatokaka/pen/dyVJmLr?editors=1000|
|31|萱|https://codepen.io/hyxfish27/pen/LYzemPq |
|32|Evan Chiang|https://codepen.io/piskesocute/pen/qBPpYEg|
|33|我是泇吟|https://codepen.io/kljuqbxs/pen/jOGYxwa|
|34|hua|https://codepen.io/hahahazzz123/pen/MWErGvX|
|35|Benson|https://codepen.io/soul81624/pen/yLzpjpj|
|36|Abbie|https://codepen.io/Abbie0704/pen/yLzpjEq|
|37|Larry|https://codepen.io/larrylinr5/pen/GRMyBBb
|38|Henry|https://codepen.io/kaohenry9287/pen/MWErBXm
|39|yu|https://codepen.io/yuu9916/pen/QWqaVvM?editors=1100
|40|Meng| https://codepen.io/MGHN/pen/yLzpxpj?editors=0011
|41|Rick Tzeng|https://codepen.io/rick917jp6/pen/PoJEdaW
|42|Leo Song|https://codepen.io/sunnylaba/pen/wvrpYGm?editors=1011
|43|Henry Wu|https://codepen.io/dkcmlaww-the-flexboxer/pen/abLERNz
|44|Erin Huang|https://codepen.io/ErinHuang/pen/LYzegex
|45|tingyu|https://codepen.io/dgltu/pen/YzrYJbe?editors=0012
|46|咖咖|https://codepen.io/gon790219/pen/jOGYQmb
|47|Terry21|https://codepen.io/feng0409/pen/VwMyVzG?editors=1010
|48|shio|https://codepen.io/shioyen/pen/KKXZrZM
|49|Yummyniya|https://codepen.io/yummyniya/pen/gOGoZOb
|50| 黃士桓 | https://codepen.io/shr-huan-huang/pen/mdBpaMV?editors=1010 |
|51| Wenfish | https://codepen.io/wenfisht/pen/jOGYXaa |
|52| Mylène |https://codepen.io/hamajibashi/pen/rNGpoWK|
|53| Alicia Lo|https://codepen.io/dkcyhyre/pen/WNZdLdZ?editors=0010
|54| Ron | https://codepen.io/long-sian-liang/pen/XWeVoKB?editors=1010 |
|55| 柴貓 | https://codepen.io/shibacat/pen/YzrYBex |
|56| Himi | https://codepen.io/Himi/pen/jOGYXdx?editors=1010|
|57| 大衛 | https://codepen.io/exnsrpjc/pen/JjrMxvb|
|58|Phil Lu|https://codepen.io/ctkeftjp-the-animator/pen/MWErxWa?editors=1001|
|59|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/JjrMqKY?editors=1111|
|60|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/zYEROYV|
|61|Yof|https://codepen.io/yangyof/pen/GRMyNWQ?editors=1011 |
|62|Izumi 泉|https://codepen.io/izumi-dev/pen/WNZMbeG|
|63|Empty Wu|https://codepen.io/emptywu/pen/ZEXrYQv |
|64|Will|https://codepen.io/ncrdpepc-the-lessful/pen/ZEXrEMK?editors=1012 |
|65|Kevin|https://codepen.io/uilaadhw/pen/GRMQgEp?editors=1111
|66|davidlai|https://codepen.io/supergoldmanster/pen/eYGVzEB?editors=1111|
|67|AKI|https://codepen.io/akichen27/pen/mdBXrRy|
|68|Fleur|https://codepen.io/swwlee/pen/jOGZMjx|
|69|TimmyHuang|https://codepen.io/TimmyHuang/pen/GRMQNKr|
|70|Jess_Wu|https://codepen.io/jess1104/pen/BawYpWE|
|71|Calon|https://codepen.io/Calon0118/pen/GRMQQPQ|
|72|有廖先生|https://codepen.io/billpop741/pen/xxXYyyV|
|73|ShaoYu|https://codepen.io/shaoyukao/pen/BawrQXV|
|74|FuChang|https://codepen.io/fuchang830714/pen/QWqmdwY|
|75|陳暐中|https://codepen.io/wei-z/pen/NWaYpxG?editors=1010|
76|聿凌|https://codepen.io/igzdflpu/pen/eYGMEdE?editors=1011|
|77|Gui|https://codepen.io/guitimliu/pen/gOGejEq|
|78|Zhang|https://codepen.io/Zhangbun/pen/QWqmZrx|
|79|Bonnie|https://codepen.io/bonnieli1414/pen/jOGzQeO?editors=1010|
| 80 | Aya | https://codepen.io/NoNameNote/pen/GRMxKoN |
| 81 | Jerry |https://codepen.io/rteyfwwd-the-scripter/pen/PoJeYzG?editors=1111
| 82 | Otis |https://codepen.io/humming74/pen/oNGdvmx?editors=1010
| 83 | Jordan |https://codepen.io/jordan-ttc-design/pen/yLzjOLp?editors=1010
| 84 | Elaine Liu | https://codepen.io/elaine7598/pen/ExwLgyw?editors=1010 |
|85|Aaron Tu|https://codepen.io/aarontu/pen/JjrvyQe|
|86|peter.chen1024|https://codepen.io/JIAN-RONG/pen/oNGdEaX?editors=1011|
|87|Alvin|https://codepen.io/Alvin20201116/pen/XWeqEzb?editors=1011|
|88|Steven Chan |https://codepen.io/Steven1220/pen/zYEjybW?editors=1011|
|89|Judy ☻|https://codepen.io/hsiaohan/pen/BawVoEG?editors=1010|
|90|DDDDK |https://codepen.io/dkklee/pen/oNGyjgb|
|91|Jung |https://codepen.io/ROUJUNG/pen/xxXjOqO?editors=1011|
|92|Hedy |https://codepen.io/hhhsuan41/pen/gOGKBdr|
|93|yuan |https://codepen.io/yuanluo13542/pen/qBPKgbM?editors=1010|
|94|Scottie|https://codepen.io/wow767t/pen/poWKQqB?editors=1011|
|95|5/周周|https://codepen.io/jhoujhou-the-decoder/pen/YzrvmKr?editors=1010
|96|Jasper|https://codepen.io/li-jasper/pen/vYeaYeg
|97|Yashien Lin| https://codepen.io/YashienLin/pen/eYGjEWp?editors=1010
|98|阿武|https://codepen.io/samwnkyat/pen/PoJBEGB
|99|Kelvin Hsu| https://codepen.io/kelvin001/pen/BawPVvz |
|100|dOvOb|https://codepen.io/gezzgrwj-the-styleful/pen/WNZKVZm
|101|Riley|https://codepen.io/jjpxbprd/pen/LYzJpRw|
|102|Sihle Huang|https://codepen.io/bugbug777/pen/zYEjaPy|
|103|安志|https://codepen.io/lwmtsgek/pen/yLzxmYG|
|104|Dobe|https://codepen.io/lisebee/pen/24452e96ad1ac0a53d3be46063655426?editors=1111|
|105|YC|https://codepen.io/YCLu/pen/LYzXpzq |
|106|danny123| https://codepen.io/binlandz123/pen/JjrebzM?editors=1010 |
|107|Jie|https://codepen.io/qgqonost-the-flexboxer/pen/NWaEdZg?editors=1011|
|108|William_O^2|https://codepen.io/CodingTrain_1/pen/YzrRZWw|
|109|Van.CS|https://codepen.io/fbacojji-the-selector/pen/ZEXmapy?editors=1001|
|110|mei|https://codepen.io/Shila-Chen/pen/WNZYzbv|
|111|PeiChi|https://codepen.io/pei-chi-tsai/pen/KKXbayg?editors=1111|
|112|Jerry Yen|https://codepen.io/JerryYen/pen/oNGmOBm
|113|Manson許|https://codepen.io/oupbzfxq-the-scripter/pen/WNZmOxm?editors=1111
|114|SeanChang|https://codepen.io/seanchang7/pen/ExwMwXB?editors=1011 |
|115|肉桂卷|https://codepen.io/ginnlee/pen/zYEbRWg |
|116|Carol Li|https://codepen.io/carolli834/pen/PoJLaEj|
|117|andyii|https://codepen.io/gultrotpybyvue/pen/OJxYRRq|
|118|三隻小貓|https://codepen.io/bagelover/pen/MWEdRgg|
|119|阿劍| https://codepen.io/seonkuraito/pen/yLzZOrB |
|120|卡丘| https://codepen.io/OneKwei/pen/mdqbVyW |
|121|2/WA| https://codepen.io/ldddl/pen/oNovLbV |
|122|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/WNXedOK?editors=1011 |
|123|Bruno Yu|https://codepen.io/bruno-yu/pen/PoErMxE |