vue使用数据双向绑定指令,点击登录按钮,在控制台打印出输入的账号以及密码。
时间: 2024-09-19 11:14:53 浏览: 36
在Vue.js中,你可以通过v-model指令实现数据的双向绑定,这是处理表单输入字段最常用的方式。首先,你需要在HTML模板中创建一个登录输入框,并将它与Vue实例的数据关联起来:
```html
<input type="text" v-model="username" placeholder="账号">
<input type="password" v-model="password" placeholder="密码">
<button @click="login">登录</button>
<script>
new Vue({
el: '#app',
data: {
username: '',
password: ''
},
methods: {
login() {
console.log('账号:', this.username);
console.log('密码:', this.password);
}
}
})
</script>
```
在这个例子中,当你在登录输入框中修改用户名或密码时,数据会自动同步到对应的data属性上。点击登录按钮时,login方法会被触发,它会从data中获取并打印当前的账号和密码。