- 循序漸進Vue.js 3前端開發實戰
- 張益琿編著
- 454字
- 2023-09-26 15:31:47
1.5.2 范例:實現一個簡單的用戶登錄頁面
本節嘗試使用Vue來構建一個簡單的登錄頁面。在練習之前,我們先來分析一下需要完成哪些工作:
(1)登錄頁面需要有標題,用來提示用戶當前的登錄狀態。
(2)在未登錄時,需要有兩個輸入框以及登錄按鈕供用戶輸入賬號、密碼和進行登錄操作。
(3)在登錄完成后,輸入框需要隱藏,需要提供按鈕讓用戶登出。
要完成上面列出的3個功能點,如果使用原生的JavaScript DOM操作會有些復雜,借助Vue的單雙向綁定和條件渲染功能,完成這些需求則會非常容易。
首先創建一個名為loginDemo.html的文件,為其添加HTML通用的模板代碼,并通過CND的方式引入Vue。之后,在其body標簽中添加如下代碼:

上面的代碼中,v-if是Vue提供的條件渲染功能,其指定的變量如果為true,則渲染這個元素,否則不渲染。v-model用來進行雙向綁定,當輸入框中的文字變化時,其會將變化同步到綁定的變量上,同樣,當我們對變量的值進行改變時,輸入框中的文本也會對應變化。
實現JavaScript代碼如下:

運行上面的代碼,未登錄時效果如圖1-15所示。當輸入了賬號和密碼完成登錄后,效果如圖1-16所示。

圖1-15 簡易登錄頁面1

圖1-16 簡易登錄頁面2
推薦閱讀
- HTML5+CSS3王者歸來
- Rust實戰
- Getting Started with CreateJS
- DevOps Automation Cookbook
- QGIS:Becoming a GIS Power User
- 小學生C++創意編程(視頻教學版)
- ASP.NET程序開發范例寶典
- Spring MVC+MyBatis開發從入門到項目實踐(超值版)
- Django 3.0入門與實踐
- Django 3.0應用開發詳解
- Scala Functional Programming Patterns
- Web開發的平民英雄:PHP+MySQL
- Three.js權威指南:在網頁上創建3D圖形和動畫的方法與實踐(原書第4版)
- JavaScript高級程序設計(第4版)
- Mastering R for Quantitative Finance