關於Vue中checkbox復選框的雙向數據綁定問題


雙向數據綁定的屬性的初始值和復選框value是否存在 會影響到復選框的選擇。

個人理解:

1、如果雙向綁定的屬性的數據類型是個數組(無論是否為空),此時復選框默認為不勾選狀態,勾選之后,直接將復選框的value值依次添加到數組中,若無value則傳入null ;
2、如果雙向綁定的屬性的數據類型是個字符串或者數字等(也可直接是布爾值),會直接轉化為布爾值然后賦值給input標簽的checked屬性,checked為true則勾選。隨后對復選框進行操作會改變checked的值,並同步給vue實例中雙向綁定的屬性。

知道怎么用就好了,比如,當要收集所有的愛好信息時,可直接將vue實例中data里的雙向綁定的屬性值設為空數組,如並且要給復選框傳value;

 

通過Vue開發者工具也能監測到:

 

 

 

當要收集用戶是否接受協議時,可直接將vue實例中data里的雙向綁定的屬性值設為空字符串或者布爾值,false即初始默認為不勾選狀態。不用給復選框傳value。

 


免責聲明!

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



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