vue.js登录页面
时间: 2024-04-29 17:18:26 浏览: 18
Vue.js是一款流行的JavaScript框架,用于构建用户界面和单页应用程序(SPA)。对于登录页面,Vue.js可以提供一些方便的功能,例如数据绑定和组件化。下面是一个简单的Vue.js登录页面的示例:
HTML代码:
```
<div id="app">
<form>
<label>用户名:</label>
<input type="text" v-model="username">
<br>
<label>密码:</label>
<input type="password" v-model="password">
<br>
<button v-on:click="login">登录</button>
</form>
</div>
```
JavaScript代码:
```
new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login: function() {
// 在这里实现登录逻辑
console.log('用户名:', this.username);
console.log('密码:', this.password);
}
}
});
```
在这个示例中,我们使用了Vue.js的双向数据绑定(v-model)来绑定表单输入到Vue.js实例的数据属性。我们还使用了一个按钮和一个v-on指令来触发一个登录方法。
当用户点击登录按钮时,login方法将被调用。在这个方法中,你可以实现你的登录逻辑。在这个例子中,我们只是简单地打印出用户名和密码。