Vue.js是非常流行的JavaScript框架之一,令人驚喜的是,Vue.js包括了多種開箱即用的組件,這些組件允許您快速開發網站和應用程序。其中,Checkbox作為一種常用的表單組件,我們需要學會如何使用它來獲取用戶的選擇。
選擇你喜歡的水果
{{ item }} 你選擇了:{{ selectedFruits }}
如您所見,在我們的模板中,我們使用了一個循環語句來創建checkbox列表。我們使用v-for循環來遍歷fruits數組,每個循環都會創建一個checkbox和標簽顯示水果名稱。要讓用戶能夠選擇不同類型的水果,我們使用元素。v-model是Vue.js中雙向數據綁定的方式之一,它將checkbox的值綁定到我們的selectedFruits中。最后,當用戶提交選擇時,選擇列表將顯示在
元素中,并通過彈出框提醒用戶他們已經做了什么。
最后需要注意的是,v-model綁定到復選框時,它將返回一個數組,而不是一個字符串。因此,我們將selectedFruits初始化為空數組。這意味著當用戶選擇不同的水果時,它們將被推入已選擇的數組中。在實際情況中,您可以將這些選擇保存到數據庫或將它們發送到服務器以獲取更多信息。