初学者前端小路Vue_1:完成界面简单的增删查

本文链接：https://blog.csdn.net/weixin_44745766/article/details/93238546

Hey，我是寒水，一名大二学生，电子商务专业在读，正在学习Java中。我试图将在Java学习中遇到的一些困惑和最终的解答发在这个账号上，希望以此来激励我不要放弃学习！

虽然我的目标是向后端发展，但成为一名优秀的后端也离不开一定的前端基础（也有一点不切实际，想成为全栈的野心），最近开始通过在图书馆和网课进行Vue.js的学习。将学习经历发在此处，以做鼓励。

这次完成的是通过Vue完成一些简单的增删查的操作

HTML文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>交易系统</title>
    <script src="./vue.js"></script>
    <link type="text/css" rel="styleSheet"  href="./System.css" />
</head>
<body>
    <div id="all">
        <div id="title">
            <h3 id="word_title">交易系统</h3>
        </div>
        <div id="input">
        <p class="word_introduction" name="three">
            <!-- 商品编号: <input type="text" id="ID" class="input" v-model="id"> -->
            商品名称: <input type="text" id="ID" class="input" v-model="name">
            <button class="input" id="add" @click='thing'>添加</button>
            <span id=NAME class="input">查询: &nbsp</span>
            <input placeholder= "请输入查询的商品名称" type="text"  class="input" v-model="keyword">

        </p>
    </div >    
    <hr id="line">
    <div>
        <table id="table">
                <thead>
                    <tr>
                        <th>
                        编号：
                    </th>
                    <th>
                        名称：
                    </th>
                    <th>
                        添加时间： 
                    </th>
                    <th>
                        操作：
                    </th>
                </tr>
            </thead>
            <tbody >
                <div>
                    <tr v-for="(item, index) in find(keyword)" >
                        <td>
                            {{item.id}}
                        </td>
                        <td>
                            {{item.name}}
                        </td>
                        <td>
                            {{item.ctime}}
                        </td>
                        <td>
                            <a href="" @click.prevent="del(item.id)">删除</a>
                        </td>
                    </tr>
                </div>
            </tbody>
        </table>
    </div>
    <hr id="line" class="feet">
    <div id="last">
        Copyright &copy; 2017-2021.CUMT.HANDSOME.ludazuo All rights reserved
    </div>
</div>
    <script>
        
        var vm = new Vue({
            el : "#all",
            data: { 
                id: '',
                name:'',
                keyword:'',
                things:[
                    { id: 1, name: '黛雪剑' ,ctime: new Date()},
                    { id: 2, name: '魔法权杖' ,ctime: new Date()},
                    { id: 3, name: '冀振杰从不开挂',ctime: new Date()},
                ]
            },
             methods: {
              
                thing(){
                    var p = {id: (this.things.length+1), name: this.name,ctime: new Date()}
                    this.things.push(p);
                    this.name = ""
                },

                del(id){
                    var index = this.things.findIndex(item => {
                        if(item.id == id){
                            return true;
                        }
                    })

                    this.things.splice(index,1);
                },
                find(keyword){
                    
                    var newList = this.things.filter(item =>{
                        if(item.name.includes(keyword)){
                            return item
                        }
                    })

                    return newList;
                }
            }
                
        });
    </script>
</body>
</html>

CSS代码如下：

#title{
    background: steelblue;
    width: 100%;
    height: 50px;
}
#word_title{
    font-family: "微软雅黑";
    font-size: "60px";
    padding-top: 0.5%;
    margin-left: 20px;
}
#input{
    margin-top: 20px;
}
.word_introduction{
    font-family: "微软雅黑";
    font-size: "16px";
    font-weight: bolder;
    margin: 0px 15px;
}
.input{
    display: inline-block;
    outline-style: none;
    border-radius:5px;
    padding: 5px 3px;
}
#add{
    margin: 0px 15px;
}
#line{
    margin: 17px 0px;
    background-color: steelblue;
    height: 3px;
}
#table{
    width: 100%;
    border-collapse:collapse;
    border-spacing:0;
    border-left:1px solid #888;
    border-top:1px solid #888;
}
#table th, #table td{
    border-right:1px solid #888;
    border-bottom:1px solid #888;
    padding:5px 15px;
}
#table th{
    font-weight:bold;background:#ccc;
}
#find{
    margin-left:47%;
}
#feet{
    position:fixed; 
    left:0px; 
    bottom:0px; 
    width:100%; 
    height:50px; 
    background-color:#000; z-index:9999;
}
#last{
    text-align:end
}
#NAME{
    margin-left: 25%
}