昨天學完了基本資料綁定，它是單純的綁入data內的資料，所以屬於「單向綁定」，那如果我們也可以輸入資料呢？那就叫「雙向綁定」了！

v-model

要講到「雙向綁定」就要先說一下v-model，它是Vue.js中的一個屬性，可以對input、textarea、select、checkbox等…這些輸入表單做雙向綁定，運做原理是透過監聽使用者輸入的事件來更新內容！聽起來有點抽象嗎？接下來實際做做看會比較容易了解。

input雙向綁定實做

我先拿簡單的<input>來做，用法其實很容易，直接加到上面就行了！

<template>
  <div id="app">
    <input type="text" v-model="myname" value="myname">
    <p>大家好！我叫 {{ myname }}</p>
  </div>
</template>

myname這個資料名字是我自已取的，你也可以換其它的，我把它綁到了v-model及value和<p>上。
(註：<input>裡的value屬性為它的元素規定值，簡單說就是<input>裡輸入的內容。)

接著下一步，我在data()內寫入資料myname:'請輸入名子'，全部完整範例如下：

<template>
  <div id="app">
    <input type="text" v-model="myname" value="myname">
    <p>大家好！我叫 {{ myname }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myname:'請輸入姓名'
      }
    }
  }
</script>

完成後看看網頁，並試著在<input>內輸入名子，下方的<p>是不是也同步更新了呢？很容易吧？

textarea也是差不多做法！看完文章後，你可以拿它來練習看看！
select、checkbox等…因為會講到「陣列」也就是v-for，所以先不提！不然跟我一樣的新手可是會難消化的。

接著再來補充點常用語法！

.trim

在輸入資料時，難免會有人一開始前面多打了一個空白鍵，或是複製貼上時不小心多選到一個空白符號，這時貼心的.trim就能幫忙我們自動去掉空白！用法很容易，直接在v-model後加入.trim就行了！如下：
<input type="text" v-model.trim="myname" value="myname">

.lazy

剛剛有沒有發現，我們在<input>輸入文字時，它是完全即時同步的，那如果我要等離開<input>時才更新我輸入的內容呢？一樣在v-model後加入.lazy就行了！如下：
<input type="text" v-model.lazy="myname" value="myname">

.number

輸入欄位中，很多是限定輸入為「數字」的，比如說「年齡」，如果有人不小心輸入了文字呢？.number這時就好用了！老樣子，在v-model後加入.number，另外將<input>設定為type=number，它會只讓「數字」輸入，如下做法：
<input type="number" v-model.number="myname" value="myname">

今天講的也不難對吧！開始有點成就感了？加油！一起努力吧！