13-0 js

const App = {
  data() {
    return {
      name: '小明',
      text: '一段文字敘述',
      checkAnswer: false,
      checkAnswer2: '',
      checkAnswer3: [],
      radioAnswer: '蛋餅',
      selectAnswer: '',
      selectAnswer2: [],
      products: [
        {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        {
          name: '飯糰',
          price: 35,
          vegan: false
        },
        {
          name: '蘿蔔糕',
          price: 30,
          vegan: true
        },
      ],
      productsObj: {
        chineseOmelette: {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        riceBall: {
          name: '飯糰',
          price: 35,
          vegan: false
        },
        soupDumpling: {
          name: '小籠包',
          price: 60,
          vegan: false
        }
      },
    }
  },
  methods: {
    reverseArray: function () {
      this.products.reverse();
    },
  },
};

Vue.createApp(App).mount('#app');

13-1 input及textarea 雙向綁定顯示值

  <input type="text" class="form-control" v-model="name">
  {{ name }}
  <textarea cols="30" rows="3" class="form-control" v-model="text"></textarea>
  {{ text }}

13-2 checkbox 單選框

  <p>小明，你是吃飽沒？</p>
  <p>{{ checkAnswer ? '吃飽了' : '還沒'}}</p>
  <div class="form-check">
  
    <input type="checkbox" class="form-check-input" id="check1" v-model="checkAnswer">
    <label class="form-check-label" for="check1">小明回覆</label>
  </div>

13-3 checkbox 單選延伸(未使用三元運算子判斷)

  <p>小明，你是吃飽沒？</p>
  <p>{{ checkAnswer2 }}</p>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check2" v-model="checkAnswer2" true-value="吃飽了" false-value="還沒">
    <label class="form-check-label" for="check2">小明回覆</label>
  </div>

13-4 checkbox 複選框

  <!-- 對應js的 checkAnswer3陣列值-->
  <p>你還要吃什麼？</p>
  <p>{{ checkAnswer3.join(' ') }}</p>
  <!-- 以下複選植被點選後，會進入js的checkAnswer陣列內 -->
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check3" value="蛋餅" v-model="checkAnswer3">
    <label class="form-check-label" for="check3">蛋餅</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check4" value="蘿蔔糕" v-model="checkAnswer3">
    <label class="form-check-label" for="check4">蘿蔔糕</label>
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="check5" value="豆漿" v-model="checkAnswer3">
    <label class="form-check-label" for="check5">豆漿</label>
  </div>

13-5 radio 單選框

  <p>你還要吃什麼？</p>
  <p>{{ radioAnswer }}</p>
  <!-- 單選綁定 radioAnswer: '蛋餅'單一值，當點選其他選項時，採覆蓋方式產生新值-->
  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio1" value="蛋餅" v-model="radioAnswer">
    <label class="form-check-label" for="radio1">蛋餅</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio2" value="蘿蔔糕" v-model="radioAnswer">
    <label class="form-check-label" for="radio2">蘿蔔糕</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" id="radio3" value="豆漿" v-model="radioAnswer">
    <label class="form-check-label" for="radio3">豆漿</label>
  </div>

13-6 select 單選

  <p>你還要吃什麼？</p>
  <p>{{ selectAnswer }}</p>
  <select class="form-select" v-model="selectAnswer">
    <option  :Value="" disabled>說吧，你要吃什麼？</option>
    <option v-for="item in products" :key="item.name" :value="item.name">{{item.name}}  / {{item.price}}</option>
  </select>

13-7 select 多選

  <p>你還要吃什麼？</p>
  <p>{{ selectAnswer2 }}</p>
  <select class="form-select" multiple v-model="selectAnswer2">
    <option selected disabled value="">說吧，你要吃什麼？</option>
    <option :value="item.name" v-for="item in products" :key="item.name">
    {{item.name}} / {{item.price}} 元</option>
  </select>

知識點來源:六角課程

以上是今天所提供知識點如有誤，再請務必在下面留言~