最近在學習vue記錄下踩坑過程:
vue官方文件中對於v-model中.number的描述:

.number
如果想自動將使用者的輸入值轉為數值型別，可以給 v-model 新增 number 修飾符：

<input v-model.number="age" type="number">
這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。

失敗例子(求哪位好心大哥指正錯誤):

<div id="app">
  <!--這裡返回的值是字串-->
  <input id="model1" v-model="age1" type="number"><br>
  <!--用了.number將返回的字串轉成數字-->
  <input id="model2" v-model.number="age2" type="number">

  <button @click="showType">驗證</button>
</div>

<script src="../../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      age1: '',
      age2: ''
    },
    methods: {
      showType: function (){
        var x1 = document.getElementById("model1");
        alert("x1 type:"+typeof (x1));
        var x2 = document.getElementById("model2");
        alert("x2 type:"+typeof (x2))
      }
    }
  })
</script>

輸出都是object…
下面是在overstack上找的例子:

<div id="app">
  <input type="text" v-model.number="age">
  <pre>
    {{ $data }}
  </pre>
</div>

<script src="../../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        age: ''
      }
    }
  })
</script>