<template> <!-- 设置行 --> <div class="row mt-3"> <!-- 设置列 --> <div class="col-md-12 col-lg-12"> <div class="card"> <div class="card-body"> <!-- mx-auto表示左右居中 --> <img class="mx-auto d-block" src="../assets/icon.png" alt=""> <!-- @submit.prevent="onSubmit"表示设置默认事件 --> <form @submit.prevent="onSubmit"> <div class="form-group"> <label for="email">邮箱</label> <!-- 样式和数据绑定class="form-control" v-model="email" --> <input type="email" class="form-control" v-model="email" > </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" v-model="password" > </div> <div class="form-group"> <label for="confirm-password">确认密码</label> <input type="confirm-password" class="form-control" v-model="confirmPassword" > </div> <button type="submit" class="btn btn-block success">注册</button> </form> </div> </div> </div> </div> </template> <script> export default { data(){ return{ email:'', password:'', confirmPassword:'' } }, methods:{ onSubmit(){ } } } </script>