如何用vuetify写表单

最新推荐文章于 2024-07-27 00:30:00 发布

烛火照亮星河

最新推荐文章于 2024-07-27 00:30:00 发布

阅读量825

点赞数

分类专栏： vuetify 文章标签： vue.js

本文链接：https://blog.csdn.net/a_bald_girl/article/details/111151300

版权

本文介绍了作者作为新手在使用Vuetify构建登录和注册页面的过程中遇到的挑战，特别是Vuetify的强大功能和复杂性。作者分享了制作一个简单注册页面的经验。

摘要由CSDN通过智能技术生成

菜鸟本人最近在用vuetify写登录注册页面，这个ui强大但是难用，很难自己调整到满意的程度。
我琢磨了好久，写出了一个粗糙的注册页面

<template style="clear:both">
  <v-card class="mx-auto my-16" max-width="600" min-width="300" shaped>
      <v-row no-gutters>
        <v-form class="mx-auto my-16" ref="form">
          <v-text-field
            placeholder="请输入手机号"
            color="info"
            outlined
            clearable
            dense
            v-model="moblie"
            :rules="[rules.required, rules.moblie]"
            prepend-inner-icon="mdi-account"
            class="rounded-pill"
          ></v-text-field>
          <v-text-field
            color="info"
            prepend-inner-icon="mdi-lock"
            placeholder="密码为6-18位英文+数字"
            outlined
            clearable
            dense
            v-model="password"
            counter
            minlength=&#