用vue制作简单的用户注册，可以进行删除和修改

最新推荐文章于 2023-07-10 16:37:50 发布

一个想要翻身的咸鱼*^*

最新推荐文章于 2023-07-10 16:37:50 发布

阅读量605

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qqqddd_yyqx/article/details/130619602

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

利用vue表单的知识制作一个简单的用户注册，校验用户名和密码的长度且不能为空，填完信息后点击注册会出现在下面的表格中，其中，表格里面还可以点击删除和修改按钮。大致效果如下：

首先先将静态的效果写出来

可以用ul li写，每个信息在li里面，看着更规范一点。其中为了能校验用户名和密码，在这两个的li里面写个span标签，放入error显示是否校验通过。

<body>
  <div id="app"></div>
  <template id="root">
    <div class="center">
      <h3>用户注册</h3>
      <ul>
        <li>
          <label>用户名:</label><input type="text" @blur="checkUserName" v-model="username" placeholder="请输入用户名">
          <span :class="[this.errors.username=='校验通过'?'green':'red']">{{this.errors.username}}</span>
        </li>
        <li>
          <label>密　码:</label><input type="password" @blur="checkPassWord" v-model="password" placeholder="请输入密码">
          <span :class="[this.errors.password=='校验通过'?'green':'red']">{{this.errors.password}}</span>
        </li>
        <li>
          <label>性别:</label>
          <input type="radio" name="gender" value="male" v-model="gender" />男
          <input type="radio" name="gender" value="female" v-model="gender" />女
        </li>
        <li>
          <label>地址:</label>
          <select v-model="selectedCity">
            <option :value="c.name" v-for="c in cities">{{c.text}}</option>
          </select>
        </li>
      </ul>
      <button @click="handleRegister">注册</button>
      <button @click="modifyUser">修改</button>
      <table border="1">
        <tr>
          <td>序号</td>
          <td>用户名</td>
          <td>性别</td>
          <td>地址</td>
          <td>编辑</td>
        </tr>
        <tr v-for="(u,index) in users">
          <td>{{index+1}}</td>
          <td>{{u.username}}</td>
          <td>{{u.gender=='male'?'男':'女'}}</td>
          <td>{{handleCity(u.city)}}</td>
          <td>
            <button @click="deleteUser(u)">删除</button>
            <button @click="editUser(u)">修改</button>
          </td>
        </tr>
      </table>
    </div>
  </template>
</body>

其次写完页面后，开始写script里面的交互效果

删除直接用splice 就行，注意修改需要添加一个id，不然无法确定修改的是哪条数据，id可以用时间来表示，每条数据注册的时间不同，所以可以区分。

<script>
  const app = Vue.createApp({
    template: "#root",
    data() {
      return {
        username: '',
        password: '',
        gender: 'male',
        cities: [
          { name: 'cq', text: '重庆' },
          { name: 'bj', text: '北京' },
        ],
        selectedCity: 'cq',
        errors: {},
        users:[],

      }
    },
    methods: {
      handleCity(city){
        let text=''
        this.cities.forEach(c=>{
          if(c.name==city){
            text=c.text
          }
        })
        return text
      },
      editUser(u){
        this.id=u.id
        this.username=u.username
        this.password=u.password
        this.gender=u.gender
        this.selectedCity=u.city
      },
      deleteUser(u){
        this.users.splice(this.users.indexOf(u),1)
      },
      modifyUser(){
        const user=this.users.find((u)=>{return u.id ==this.id})
        user.username=this.username
        user.password=this.password
        user.gender=this.gender
        user.city=this.selectedCity
      },
      handleRegister() {
        this.users.push({
          id:new Date().getTime(),
          username: this.username,
          password: this.password,
          gender: this.gender,
          city: this.selectedCity
        })
      },
      checkUserName() {
        if (this.username == "" || this.username == null) {
          this.errors.username = '用户名不能为空'
        } else {
          this.errors.username = "校验通过"
        }
      },
      checkPassWord() {
        if (this.password == "" || this.password == null) {
          this.errors.password = '密码不能为空'
        } else {
          if (this.password.length < 6) {
            this.errors.password = "密码长度不正确"

          } else {
            this.errors.password = "校验通过"

          }
        }
      }
    }
  })
  app.mount("#app")
</script>

当然可以写一些css代码美化一下页面，这里就懒得写了

完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    li {
      list-style: none;
    }

    .center {
      width: 400px;
      margin: 0 auto;
      text-align: center;
    }

    .red {
      color: red;
    }

    .green {
      color: green;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <template id="root">
    <div class="center">
      <h3>用户注册</h3>
      <ul>
        <li>
          <label>用户名:</label><input type="text" @blur="checkUserName" v-model="username" placeholder="请输入用户名">
          <span :class="[this.errors.username=='校验通过'?'green':'red']">{{this.errors.username}}</span>
        </li>
        <li>
          <label>密　码:</label><input type="password" @blur="checkPassWord" v-model="password" placeholder="请输入密码">
          <span :class="[this.errors.password=='校验通过'?'green':'red']">{{this.errors.password}}</span>
        </li>
        <li>
          <label>性别:</label>
          <input type="radio" name="gender" value="male" v-model="gender" />男
          <input type="radio" name="gender" value="female" v-model="gender" />女
        </li>
        <li>
          <label>地址:</label>
          <select v-model="selectedCity">
            <option :value="c.name" v-for="c in cities">{{c.text}}</option>
          </select>
        </li>
      </ul>
      <button @click="handleRegister">注册</button>
      <button @click="modifyUser">修改</button>
      <table border="1">
        <tr>
          <td>序号</td>
          <td>用户名</td>
          <td>性别</td>
          <td>地址</td>
          <td>编辑</td>
        </tr>
        <tr v-for="(u,index) in users">
          <td>{{index+1}}</td>
          <td>{{u.username}}</td>
          <td>{{u.gender=='male'?'男':'女'}}</td>
          <td>{{handleCity(u.city)}}</td>
          <td>
            <button @click="deleteUser(u)">删除</button>
            <button @click="editUser(u)">修改</button>
          </td>
        </tr>
      </table>
    </div>
  </template>
</body>
<script>
  const app = Vue.createApp({
    template: "#root",
    data() {
      return {
        username: '',
        password: '',
        gender: 'male',
        cities: [
          { name: 'cq', text: '重庆' },
          { name: 'bj', text: '北京' },
        ],
        selectedCity: 'cq',
        errors: {},
        users: [],

      }
    },
    methods: {
      handleCity(city) {
        let text = ''
        this.cities.forEach(c => {
          if (c.name == city) {
            text = c.text
          }
        })
        return text
      },
      editUser(u) {
        this.id = u.id
        this.username = u.username
        this.password = u.password
        this.gender = u.gender
        this.selectedCity = u.city
      },
      deleteUser(u) {
        this.users.splice(this.users.indexOf(u), 1)
      },
      modifyUser() {
        const user = this.users.find((u) => { return u.id == this.id })
        user.username = this.username
        user.password = this.password
        user.gender = this.gender
        user.city = this.selectedCity
      },
      handleRegister() {
        this.users.push({
          id: new Date().getTime(),
          username: this.username,
          password: this.password,
          gender: this.gender,
          city: this.selectedCity
        })
      },
      checkUserName() {
        if (this.username == "" || this.username == null) {
          this.errors.username = '用户名不能为空'
        } else {
          this.errors.username = "校验通过"
        }
      },
      checkPassWord() {
        if (this.password == "" || this.password == null) {
          this.errors.password = '密码不能为空'
        } else {
          if (this.password.length < 6) {
            this.errors.password = "密码长度不正确"

          } else {
            this.errors.password = "校验通过"

          }
        }
      }
    }
  })
  app.mount("#app")
</script>

</html>