Vue練習之表格的增刪改

最新推荐文章于 2024-10-05 01:22:45 发布

躺平的乐子人

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量83

点赞数

分类专栏： Vue3 文章标签： vue.js javascript html Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_73368873/article/details/129118321

版权

Vue3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

簡述

這是黑馬的vue的表格練習，我把它修改成vue3的版本了，這裡記錄一下

<!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 type="text/css">
        .grid {
            margin: auto;
            width: 530px;
            text-align: center;
        }
        .grid table {
            border-top: 1px solid #C2D89A;
            width: 100%;
            border-collapse: collapse;
        }
        .grid th,td {
            padding: 10;
            border: 1px dashed #F3DCAB;
            height: 35px;
            line-height: 35px;
        }
        .grid th {
            background-color: #F3DCAB;
        }
        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }

    </style>

</head>
<body>
    <div id="app" >
       <div class="grid">
          <h1>用户管理</h1>
          <div class="book">
            <div>
              <label for="id">
                编号：
              </label>
              <input type="text" id="id" v-model='id'>
              <label for="name">
                名称：
              </label>
              <input type="text" id="name" v-model='name'>
              <button @click='handle'>提交</button>
            </div>
          </div>
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr :key='item.id' v-for='item in books'>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>
                  <a href="" @click.prevent='toEdit(item.id)'>修改</a>
                  <span>|</span>
                  <a href="" @click.prevent="deleteBook(item.id)">删除</a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
       </div>

    </div>
    <script>
      
      //創建應用
      const { createApp } = Vue
      createApp({
        data() {
            return {
              flag: false,
              id: '',
              name: '',
              books: [{
                id: 1,
                name: '三国演义',
                date: ''
              },{
                id: 2,
                name: '水浒传',
                date: ''
              },{
                id: 3,
                name: '红楼梦',
                date: ''
              },{
                id: 4,
                name: '西游记',
                date: ''
              }]
            }
        },
        methods:{
              handle: function(){
                // 添加图书
                var book = {};
                book.id = this.id;
                book.name = this.name;
                book.date = '';
                this.books.push(book);
                // 清空表单
                this.id = '';
                this.name = '';
            },
            toEdit: function(id){
                  // 禁止修改ID
                  this.flag = true;
                  console.log(id)
                  // 根据ID查询出要编辑的数据
                  var book = this.books.filter(function(item){
                    return item.id == id;
                  });
                  console.log(book)
                  // 把获取到的信息填充到表单
                  this.id = book[0].id;
                  this.name = book[0].name;
                },
            deleteBook: function(id){
                  // 删除图书
                  // 根据id从数组中查找元素的索引
                  // var index = this.books.findIndex(function(item){
                  //   return item.id == id;
                  // });
                  // 根据索引删除数组元素
                  // this.books.splice(index, 1);
                  // -------------------------
                  // 方法二：通过filter方法进行删除
                  this.books = this.books.filter(function(item){
                    return item.id != id;
                  });
        }
        },
    }).mount('#app')
    </script>
</body>
</html>