vue表单添加事件

2025-01-14T07:52:00

在form第一个便签里加上 @submit 属性,后面跟上执行的函数,
例如:

<form @submit="login">
    <div class="mb-3">
      <label for="username" class="form-label">Username</label>
      <input v-model="username" type="text" class="form-control" id="username">
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">Password</label>
      <input v-model="password" type="password" class="form-control" id="password">
    </div>
    <div class="error-message">{{ errorMessage }}</div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

如果需要禁用掉默认事件可以用 @submit.prevent 例如:

<form @submit.prevent="login">
    <div class="mb-3">
      <label for="username" class="form-label">Username</label>
      <input v-model="username" type="text" class="form-control" id="username">
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">Password</label>
      <input v-model="password" type="password" class="form-control" id="password">
    </div>
    <div class="error-message">{{ errorMessage }}</div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »