用vuemethods方法通过button按钮获取用户在input上输入的账号和密码
时间: 2024-02-03 15:15:04 浏览: 57
首先在模板中定义一个包含input和button的表单,如下所示:
```
<template>
<div>
<form>
<label>账号:</label>
<input type="text" v-model="username">
<br>
<label>密码:</label>
<input type="password" v-model="password">
<br>
<button type="button" @click="submit">登录</button>
</form>
</div>
</template>
```
然后在script中定义data和methods,其中data中定义username和password变量,methods中定义submit方法来获取表单中的账号和密码:
```
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
submit() {
console.log('账号:', this.username)
console.log('密码:', this.password)
}
}
}
</script>
```
这样,当用户在input上输入账号和密码后,点击按钮就会触发submit方法,从而获取账号和密码并在控制台中输出。
阅读全文