vue--增删改查信息demo

最新推荐文章于 2024-06-18 22:56:01 发布

咩有猫腻.

最新推荐文章于 2024-06-18 22:56:01 发布

阅读量336

点赞数

分类专栏：三-框架类 Vue 前端后端demo

本文链接：https://blog.csdn.net/DcTbnk/article/details/107226139

版权

三-框架类同时被 3 个专栏收录

83 篇文章 0 订阅

订阅专栏

前端后端demo

33 篇文章 0 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

一.自己的

在这里插入图片描述

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>练习</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>

<body>
  <div id="app">
    <div class="panel panel-info">
      <div class="panel-heading">
        <h3 class="panel-title">练习</h3>
      </div>
      <div class="panel-body">
        <div class="form-group" v-show="oneList.isShow">
          <label for="">ID编号</label>
          <input type="text" class="form-control" disabled v-model="oneList.id" />
        </div>
        <div class="form-group">
          <label for="">名字</label>
          <input type="text" class="form-control" placeholder="请输入名字" v-model="oneList.name" />
        </div>
        <div class="form-group">
          <label for="">头像</label>
          <input type="text" class="form-control" placeholder="请输入图片链接" v-model="oneList.imgUrl" />
        </div>
        <div class="form-group">
          <label for="">技能</label>
          <textarea rows="3" class="form-control" placeholder="请输入技能" v-model="oneList.skills"></textarea>
        </div>
        <button type="submit" class="btn btn-primary" @click="save(oneList.id)">{{oneList.status==0?'添加':'保存'}}</button>
        <hr />

        <table class="table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>序号</th>
              <th>名字</th>
              <th>主图</th>
              <th>技能</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <div class="checkbox">
                <label>
                  <input type="checkbox" v-model="checkAll">
                  全选
                </label>
                <label>
                  <input type="checkbox" v-model="checkInvert">
                  反选
                </label>
                <button class="btn btn-danger btn-sm" @click="delChecked">删除</button>
              </div>
            </tr>
            <tr v-for="(item,index) in list" :key="item.id" v-if="item.isIf">
              <td>
                <label>
                  <input type="checkbox" v-model="item.checked">
                  {{index+1}}
                </label>
              </td>
              <td>{{item.name}}</td>
              <td><img :src="item.imgUrl" style="width:120px;"></td>
              <td>{{item.skills}}</td>
              <td>
                <button class="btn btn-info btn-sm" @click="amend(item.id)">修改</button>
                <button class="btn btn-danger btn-sm" @click="item.isIf=false">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        // 一条信息
        oneList: {
          id: '', // id编号
          name: '',
          imgUrl: '',
          skills: '',
          checked: false, // 小复选框是否被选中
          isIf: true, // 是否显示和删除
          isShow: false, // 是否显示和隐藏
          status: 0, // 0是添加 1是保存
        },
        // 所有信息
        list: [],
      },
      methods: {
        // 点击添加、保存：当status为0时是添加，为1时是保存
        save(id) {
          //  status=0 添加  将数据oneList放入list中，动态生成添加的信息
          if (this.oneList.status == 0) {
            if (this.oneList.name && this.oneList.imgUrl && this.oneList.skills) {
              this.oneList.id = Date.now();
              this.list.push({
                ...this.oneList
              });
            } else {
              alert('请将信息填写完整');
            }
            //  status=1  保存 
          } else if (this.oneList.status == 1) {
            var index = this.list.findIndex(item => item.id = id);
            this.list[index].name = this.oneList.name;
            this.list[index].imgUrl = this.oneList.imgUrl;
            this.list[index].skills = this.oneList.skills;
            this.list[index].isShow = false;
            this.list[index].status = 0;
          }
          // 
          this.oneList.id = '';
          this.oneList.name = '';
          this.oneList.imgUrl = '';
          this.oneList.skills = '';
          this.oneList.isShow = false;
          this.oneList.checked = false;
          this.oneList.isIf = true;
          this.oneList.status = 0;
        },
        // 点击最外面同意的删除
        delChecked() {
          this.list.filter(item => item.checked).forEach(item => item.isIf = false);
        },
        // 点击修改
        amend(id) {
          this.oneList.status = 1;
          var index = this.list.findIndex(item => item.id == id);
          console.log(this.list[index]);
          this.oneList.id = id;
          this.oneList.name = this.list[index].name;
          this.oneList.skills = this.list[index].skills;
          this.oneList.imgUrl = this.list[index].imgUrl;
          this.oneList.isShow = true;

        },
      },
      computed: {
        // 全选
        checkAll: {
          set(v) {
            this.list.forEach(item => item.checked = v);
          },
          get() {
            if (this.list.length == 0) {
              return false;
            }
            return this.list.length === this.list.filter(item => item.checked).length;
          },
        },
        // 反选
        checkInvert: {
          set() {
            this.list.forEach(item => item.checked = !item.checked);
          },
          get() {

          },
        },
      },
    });
  </script>
</body>

</html>

二.别人的

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>练习</title>
    <link
      rel="stylesheet"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
    />
    <style>
      img {
        max-width: 100px;
        max-height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">练习</h3>
        </div>
        <div class="panel-body">
          <div class="form-group">
            <label for="">名字</label>
            <input
              type="text"
              class="form-control"
              placeholder="请输入名字"
              v-model="list.id"
            />
          </div>
          <div class="form-group">
            <label for="">头像</label>
            <input
              type="text"
              class="form-control"
              placeholder="请输入头像"
              v-model="list.img"
            />
          </div>
          <div class="form-group">
            <label for="">技能</label>
            <textarea
              rows="3"
              class="form-control"
              placeholder="请输入技能"
              v-model="list.skill"
            ></textarea>
          </div>
          <button
            type="submit"
            class="btn btn-primary"
            @click="save()"
            v-if="isShow"
          >
            添加
          </button>
          <button
            type="submit"
            class="btn btn-primary"
            v-if="!isShow"
            @click="baocun"
          >
            保存修改
          </button>
          <hr />

          <table class="table table-bordered table-hover table-striped">
            <thead>
              <tr>
                <th>序号</th>
                <th>名字</th>
                <th>主图</th>
                <th>技能</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in data" :key="index">
                <th>{{index + 1}}</th>
                <th>{{item.id}}</th>
                <th><img :src="item.img" alt="" /></th>
                <th>{{item.skill}}</th>
                <th>
                  <button
                    type="button"
                    class="btn btn-danger btn-sm"
                    @click="xiugai(index)"
                  >
                    修改
                  </button>
                  <button
                    type="button"
                    class="btn btn-danger btn-sm"
                    @click="del(index)"
                  >
                    删除
                  </button>
                </th>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        isShow: true,
        data: [],
        list: {
          id: "",
          img: "",
          skill: "",
        },
      },
      methods: {
        save() {
          if (this.list.id && this.list.img && this.list.skill) {
            this.data.push(this.list);
            this.list = {
              id: "",
              img: "",
              skill: "",
              inx: "",
            };
          } else {
            alert("请填写所有数据");
          }
        },
        xiugai(index) {
          this.list.id = this.data[index].id;
          this.list.img = this.data[index].img;
          this.list.skill = this.data[index].skill;
          this.isShow = !this.isShow;
          this.list.inx = index;
        },
        del(index) {
          this.data.splice(index, 1);
        },
        baocun() {
          var num = this.list.inx;
          if (this.data[num]) {
            if (this.list.id && this.list.img && this.list.skill) {
              this.data[num].id = this.list.id;
              this.data[num].img = this.list.img;
              this.data[num].skill = this.list.skill;
              this.isShow = !this.isShow;
              this.list = {
                id: "",
                img: "",
                skill: "",
                inx: "",
              };
            } else {
              alert("请填写所有数据");
            }
          } else {
            alert("data中不存在这一项数据,请添加数据");
            this.isShow = !this.isShow;
          }
        },
      },
    });
  </script>
</html>