vue中數字和字符串的轉換問題(v-bind和v-model的使用)


 

 

 

 可以看到上面自增加時,成了拼接字符串的效果。

打開vue工具查看:

 

 此時n和sum都是數字,可以正常自增加,但是操作了section之后,n就變成了字符串:

 

 此時再執行自增加,sum也會變成字符串形式。

解決方法:使用v-bind

 在v-bind下,引號內部的內容會被當成JS表達式去解析。為了方便展示區別,上圖內容中1是字符串形式,2和3都是數字形式(感謝編譯器的顏色提示)

Vue2和Vue3對v-bind使用的解釋和注意事項:

https://cn.vuejs.org/v2/api/#v-bind

https://v3.cn.vuejs.org/guide/migration/v-bind.html#%E4%BB%8B%E7%BB%8D

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

另一種解決方法是利用v-model的內置修飾符(三種內置修飾符的相關介紹:https://v3.cn.vuejs.org/guide/forms.html#lazy)

 

v-model的介紹:https://cn.vuejs.org/v2/api/#v-model

v-model修飾符拓展:

https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%84%E7%90%86-v-model-%E4%BF%AE%E9%A5%B0%E7%AC%A6

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM