1. 程式人生 > >vue中的number

vue中的number

get string 接下來 function 而是 結果 spa com png

今天在vue文檔中看到有number這樣一個修飾符

技術分享

覺得挺方便的就嘗試了一下下面是代碼

<body>
<div id="box">
<input type="number"  v-model.number="message" id="test" @change="change()">
    <div>{{message}}</div>
</div>
</body>
<script type="text/javascript">
    var test=document.getElementById("
test") new Vue({ el:"#box", data:{ message:"123", }, methods:{ change:function () { console.log(typeof test.value) } } }) </script>

結果打出出來並不是我想的numer而是string,隨即在網上查找了了一下看到很多人有類似的問題,最後我發現這個修飾修改的是並不是input裏面的類型,而是和他綁定的data裏面的message,接下來再嘗試一下

<div id="box">
<input type="number"  v-model.number="message" id="test" @change="change()">
    <div>{{message}}</div>
</div>
</body>
<script type="text/javascript">
    var test=document.getElementById("test")
    new Vue({
        el:"#box",
        data:{
            message:
"123", }, methods:{ change:function () { console.log(typeof this.message) } } }) </script>

果然最後輸出的是number

vue中的number