登錄頁面在Web應用程序中必不可少，是用戶與系統進行交互的第一步。本文將帶你了解如何使用Vue.js框架創建一個簡單的登錄頁面，實現用戶名和密碼驗證。
首先，我們需要創建一個Vue實例，并在HTML編碼中創建一個div元素以表示該實例的范圍。我們還需要創建input類型為text和password的兩個Input元素和一個提交按鈕。在Vue實例中，我們使用data屬性來定義一個對象，其中包含一個名為username和一個名為password的屬性。我們還需要一個名為error的屬性，來顯示錯誤消息。
<html>
<head>
<title>Vue Login Page</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Login</h1>
<p>Username:</p>
<input type="text" v-model="username" />
<p>Password:</p>
<input type="password" v-model="password" />
<button v-on:click="login">Sign in</button>
<p v-if="error">{{ error }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
username: '',
password: '',
error: ''
},
methods: {
login: function() {
if (this.username === 'admin' && this.password === 'password') {
alert('success');
} else {
this.error = 'Invalid login credentials';
}
}
}
});
</script>
</body>
</html>在登錄函數中，我們首先判斷用戶名和密碼是否匹配預定義的admin和password。 如果用戶名和密碼為匹配，就彈出一個成功的登錄消息。如果失敗，我們將使用Vue的條件渲染功能來顯示錯誤消息。
用Vue.js創建登錄頁面就這么簡單！ Vue具有高級的數據綁定和組件化模塊化的能力，可以輕松地進行大型Web應用程序開發。所以，繼續努力學習！
下一篇css 平面輸入框