今天要來聊聊的是 Vue 的資料雙向綁定指令 : v-model
(偷偷說明天應該會聊聊 Vue2 v.s. Vue3雙向綁定的原理~

首先，雙向綁定 是什麼意思呢?

簡單來說，就是把 data 和 DOM 相互綁定，只要有一方產生變動、另一方也會即時更新。

input

<input type="text" class="form-control" v-model="name">
  {{ name }}

textarea

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

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>

checkbox 單選延伸

在判斷 checkbox 的 true / false 分別渲染哪些內容時，除了三元運算子，我們也可以透過true-value 和false-value的方式來達成。

 <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>

checkbox 複選框

因為是單選，所以答案會被覆寫。

<p>你還要吃什麼？</p>
  <p>{{ checkAnswer3.join(' ') }}</p>
  <div class="form-check">
    <!-- checkAnswer為陣列 -->
    <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>

radio 單選框

<p>你還要吃什麼？</p>
  <p>{{ radioAnswer }}</p>
  <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>

select 單選

  <p>你還要吃什麼？</p>
  <!-- 這裡會顯示出option中value的值 -->
  <p>{{ selectAnswer }}</p>
  <select class="form-select" v-model="selectAnswer">
    <option value='' disabled>說吧，你要吃什麼？</option>
    <option :value="`${item.name} / ${item.price} 元`" v-for="item in products" :key="item.name">
    {{item.name}} / {{item.price}} 元</option>
  </select>

select 多選

 <p>你還要吃什麼？</p>
  <p>{{ selectAnswer2.join(' ') }}</p>
  <!-- 在這裡多加上 multiple ，就可以獲得多選的select-->
  <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>
</div>

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: 60,
          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
        },
        radishCake: {
          name: '蘿蔔糕',
          price: 30,
          vegan: true
        }
      },
    }
  },
  methods: {
    reverseArray: function () {
      this.products.reverse();
    },
  },
};

Vue.createApp(App)
  .component('list-item', {
    template: `
      <li>
        {{ item.name}} / {{ item.price }} 元
      </li>
    `,
    props: ['item']
  }).mount('#app');