在Vue中 {{ }} 可在其中加入``(樣板字面值) JS語法 甚至是帶入methods

v-for

v-for 也可跑物件、數字 記得加上:key
v-for若須和v-if同時使用時，加入template

      <template v-for="product in products">
        <li v-if="product.price <= 110">{{ product }}</li>
      </template>

v-bind:

可在html屬性上加上邏輯判斷
<button type="button" :disabled="DataTruthyToBeDisabled">送出
以下是動態切換標籤的寫法

    <button
        type="button"
        @click="dynamic = dynamic === 'disabled' ? 'readonly': 'disabled'"
      >
        切換為
      </button>
      {{dynamic}}
      <input type="text" :value="name" :[dynamic] />

checkbox應用

true,false value

      <p>發財了嗎?</p>
      {{checkAnswer}}

      <input
        type="checkbox"
        v-model="checkAnswer"
        id="checkbox1"
        true-value="yes"
        false-value="no"
      />
      <label for="checkbox1" >回覆</label>

複選框

{{ checkAnswer3.join(',')}}

      <input
        type="checkbox"
        name=""
        id="checkbox3"
        value="item1"
        v-model="checkAnswer3"
      />
      <label for="checkbox3">item1</label>
      <input
        type="checkbox"
        name=""
        id="checkbox4"
        name="item2"
        v-model="checkAnswer3"
        value="item2"
      />
      <label for="checkbox4">item2</label>

radio

input 的v-model為同一值

select

      <p>要吃什麼?</p>
      <p>{{ selectAnswer }}</p>
      <select v-model="selectAnswer" multiple> 
        <!-- 去掉mutiple為單選 -->
        <option value="" disabled>選擇一項</option>
        <option
          :value="product.name"
          v-for="product in products"
          :key="product.id"
        >
          {{product.name}}
        </option>
      </select>

作品練習

小作品練習
加上col-4 col-8等切成兩邊
左側a標籤加入 class="list-group-item list-group-action"
跟資料綁定的label 跟input 記得改為:for 及 :id
input 可選的部分要加:value 選取後值才能傳值給data
position:absolute外層可加入position: relative 限定範圍

selectedProduct(product) {
this.temp = { ...product, toppings: [] };
},
複選框toppings記得寫在methods中 不然會造成非預期問題
也可在methods中temp寫入 ice: "正常冰" 之類的 會成為預設值

不熟悉的部分

參考用限定框

  <div
              v-if="!temp.name"
              class="position-absolute text-white d-flex align-items-center justify-content-center"
              style="
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: rgba(0, 0, 0, 0.65);
                z-index: 100;
              "
            >
              請先選擇飲品
            </div>