《Vue+Spring Boot前后端分离开发实战（第2版·微课视频版）》

2.5示例：实现用户登录页面

使用Vue来构建一个简单的登录页面，借助Vue的单双向绑定和条件渲染功能，完成登录需求则会非常容易。创建一个login.html文件，如例2-2所示。

【例2-2】用户登录页面

html>

lang="en">

 
 

 
 

 
 

 
 

 
 

 
     

{{title}}

 
     

账号：

        v-if="noLogin">密码：v-model="password"                type="text">

 
     

style="border-radius: 30px ;width: 100px;

        margin: 20px auto; color:
white;background-color: blue;">{{buttonTitle}}

 
 

 
 

在上面的代码中v-if是Vue提供的条件渲染功能，其指定的变量如果值为true，则渲染这个元素，否则不渲染。v-model用来进行双向绑定，当输入框中的文字变化时，其会将变化同步到绑定的变量上，同样，当我们对变量的值进行改变时，输入框中的文本会对应变化。

运行上面代码，未登录时效果如图2-10所示。当输入用户名和密码登录后，效果如图2-11所示。