可以看到上面自增加時,成了拼接字符串的效果。
打開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