雙向綁定

v-model可以進行資料雙向綁定，最常見於取得使用者的 input 例如：文字區域textarea、單選radio、下拉式選單select等等，並與同名的 data 內的資料做綁定。而且v-model會根據監聽的對象來自動選正確的方式來更新值。

範例

input

<div id="app">
  <p>歡迎來到<span v-text="shopName_01"></span>！請告訴我您需要的商品！</p>
  <input v-model="goods"></input>
  <p v-text="goods"></p>
</div>

let vm = new Vue({
  el:'#app',
  data:{
    shopName_01: '友好商店',
    goods:''
  }
})

radio

<div id="app">
  <input type="radio" value="精靈球" v-model="goods">
  <label for="精靈球">精靈球</label>
  <br>
  <input type="radio" value="超級球" v-model="goods">
  <label for="超級球">超級球</label>
  <br>
  <p v-text="goods"></p>
</div>

javascript 部分同 input

checkbox

<div id="app">
  <input type="checkbox" id="精靈球" value="精靈球" v-model="goods">
  <label for="精靈球">精靈球</label>
  <input type="checkbox" id="超級球" value="超級球" v-model="goods">
  <label for="超級球">超級球</label>
  <input type="checkbox" id="高級球" value="高級球" v-model="goods">
  <label for="高級球">高級球</label>
  <p v-text="goods"></p>
</div>

  goods: [] // 同 input 但要改成陣列的 []

select

<div id="app">
  <select v-model="goods">
    <option disabled value="">請告訴我您想購買的商品</option>
    <option>精靈球</option>
    <option>超級球</option>
    <option>高級球</option>
  </select>
  <p v-text="goods"></p>
</div>

今天的程式碼在這個 codepen 裡，此文諸多不周到的地方還請多包涵指教。