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