vue设置列表数据添加

最新推荐文章于 2023-10-22 06:30:23 发布

LuiChun

最新推荐文章于 2023-10-22 06:30:23 发布

阅读量2.5k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_47021806/article/details/110148362

版权

vue 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<template>
  <div>
    <div>
      <fieldset>
        <legend>练习</legend>
        <div>
          <span>姓名:</span>
          <input type="text" placeholder="名字" v-model="newPerson.name" />
        </div>
        <div>
          <span>年龄:</span>
          <input type="text" placeholder="年龄" v-model="newPerson.age" />
        </div>
        <div>
          <span>性别:</span>
          <select v-model="newPerson.sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
        <div>
          <span>号码:</span>
          <input type="text" placeholder="手机号码" v-model="newPerson.phone" />
        </div>
        <!-- 下面监听这里的点击 函数 -->
        <button @click="createNewPerson">创建用户</button>
      </fieldset>
      <!-- 展示表格 -->
      <table>
        <!-- 展示标题 -->
        <thead>
          <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>号码</td>
            <td>删除</td>
          </tr>
        </thead>
        <!-- 循环展示内容 -->
        <thead>
          <tr v-for="(p, index) in persons">
            <td v-text="p.name">姓名</td>
            <td v-text="p.age">年龄</td>
            <td v-text="p.sex">性别</td>
            <td v-text="p.phone">号码</td>
            <td>
              <button @click="delPerson(index)">删除</button>
            </td>
          </tr>
        </thead>
      </table>
    </div>
    <br />
  </div>
</template>
<script scoped>
export default {
  name: "Test",
  data() {
    return {
      persons: [
        { name: "姬天道", age: 40, sex: "男", phone: "18898836586" },
        { name: "姬老魔", age: 60, sex: "男", phone: "18898836587" },
        { name: "陆州州", age: 28, sex: "男", phone: "18898836588" },
        { name: "陆阁主", age: 28, sex: "男", phone: "18898836589" },
      ],
      newPerson: { name: "", age: 0, sex: "男", phone: "" },
    };
  },
  //   在渲染完成之后再调用的
  methods: {
    // 添加
    createNewPerson() {
      // 验证
      let { name, age, sex, phone } = this.newPerson;
      if (name === "") {
        alert("姓名不能为空");
        return;
      }
      if (age <= "0") {
        alert("年龄不正确");
        return;
      }
      if (phone === "") {
        alert("请输入手机号码");
        return;
      }
      // 2.插入数据
      this.persons.unshift(this.newPerson);
      // 3.清空数据
      this.newPerson = { name: "", age: 0, sex: "男", phone: "" };
    },
    // 删除
    delPerson(index) {
      this.persons.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.left {
  text-align: left;
}
</style>