本章我們就來說說網頁中的互動必備屬性, 表單 form, 這個是頁面互動使用者錄入的關鍵知識點, 在 Vue。js 中使用指令 v-model 進行資料的雙向繫結。它會根據控制元件型別自動的更新資料到頁面中。需要注意的是, 在資料初始化的時候, v-model 會忽略頁面中自帶有的屬性值, 只會使用元件中的 data 函式進行資料的初始化。
本章思維導圖
Form 表單包含的元素有:
表單元素, 根據型別又分為: text, checkbox, radio, submit, reset, button, file。
我們從最常用且最簡單的 文字內容說起。看看 Vue。js 給我們帶來了什麼便利的改變。
單行文字 (input type=‘text’)
input 預設型別為: text, 並且使用 v-model 進行資料雙向繫結, 直接檢視程式碼:
執行 F5 除錯, 瀏覽器檢視效果:
這就是雙向繫結的好處, 如果沒有這個雙向繫結之前, 你需要先繫結 2 個事件, 一個是表單的 change 事件, 一個是元素的更新時間, 在 change 事件觸發的時候, 使用 innerText 更新頁面元素的內容。
多行文字(Textarea)
檢視案例:
除錯檢視頁面, 在第二個文字域中寫入文字, 你會發現所有的文字域也會跟著改變, 但是這個不是最好的方式, 如果修改了第一個文字域的值, 你會發現, 後面 v-model 繫結的資料並沒有變化 檢視效果:
最好的方式就是使用:
<
textarea v-model
=“
userName
”>
textarea
>
複選框 (input type=‘checkbox’)
複選框允許你為表單提交時選擇一個值或者一組值。單個複選框, 可以繫結到布林值型別,舉例如下:
除錯檢視未選中:
選中之後的效果:
在多個複選框的情況下, 可以將 input 值繫結到一個數組中, 程式碼如下:
重新開啟該頁面, 進行檢視效果。 選擇之後。 就可以看到效果。這裡只是為了演示, 實際中的 value 都是標誌字串。
在複選框中, 可以使用 true-value 和 false-value 進行選中和未選中的值的賦值。
// 選中的時候值就為 yes:vm。toggle === ‘yes’// 未選中的時候值就為 no:vm。toggle === ‘no’
單選框 (input type=‘radio’)
單選框按鈕允許你選擇單一的值來提交表單。 預設的情況下為小型圓圈圖表。一個單選按鈕由具有相同 name 屬性的單選按鈕組成的。舉個例子:
開啟瀏覽器檢視效果:
選擇框 ( Select )
HTML
單選選擇框
除錯檢視效果:
如果選擇了 甲 就可以看到下面的效果。
看 乙 的程式碼重新指定了 value 值。 所以看到效果如下:
多選選擇框 multiple
只需要指定 select 的 multiple 屬性。
檢視效果, 這裡需要注意, 使用 ctrl 按下不松進行滑鼠單擊進行多項選擇:
從上面我們可以看到我們的資料基本上就是一個數組項, 這裡既然是個陣列, 就可以使用 v-for 標籤進行渲染, 在實際開發的過程中, 也多數都是使用 v-for 進行渲染。 舉個例子:
檢視效果:
表單中的修飾符
前面在說事件的時候, 說過事件的修飾符, 在表單中也有修飾符。 分別是: 。lazy, 。number, 。trim
。lazy
在預設渲染的情況下,v-model 在每次 input 事件觸發後都將輸入的值資料進行雙向繫結, 資料更新, 如果不想要這種效果的時候, 可以嘗試使用 lazy 修飾符, 這樣資料就只會在 change 事件觸發之後, 資料才會修改。
這個時候, 不觸發 change 事件就不會更新資料到頁面上。
。number
將使用者輸入的資料轉換成數值型別。但是需要注意的是, 必須是能夠正常轉換的字串才有效, 負責只會返回原始值。
。trim
這個就是很容易理解了, 就是給字串去除首尾的空白字元。
表單的相關內容這裡暫時告一段落。 後續會針對這塊進行原始碼級別分析。 關注我。 看後續的內容。
每天都強制自己做點非舒服區的知識學習, 你會發現你進步神速的。加油!