使用vue做一个小项目

最新推荐文章于 2024-07-15 14:11:16 发布

一菜鸡

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量613

点赞数

本文链接：https://blog.csdn.net/weixin_45669184/article/details/110448277

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-Vue-综合小练习</title>
    <script src="js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            width: 800px;
            margin: 50px auto;
            background: skyblue;
        }
        table{
            width: 100%;
            background: #000;
        }
        table tr{
            background: #fff;
        }
        form{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<!--这里就是MVVM中的View-->
<div id="app">
    <form v-show="isShow">
        <input type="text" placeholder="请输入序号" v-model="person.id">
        <input type="text" placeholder="请输入名称" v-model="person.name">
        <input type="text" placeholder="请输入分数" v-model="person.score">
        <input type="submit" value="新增" @click.prevent="add">
        <input type="submit" value="查询" @click.prevent="query">
    </form>
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="(person, index) in persons">
            <!--<td><input type="text" :value="person.id" :disabled="isDisabled"></td>
            <td><input type="text" :value="person.name" :disabled="isDisabled"></td>
            <td><input type="text" :value="person.score" :disabled="isDisabled"></td>
            <td><input type="text" :value="person.time | dateFormart" :disabled="isDisabled"></td>-->
            <td><input type="text" v-model="person.id" :disabled="isDisabled"></td>
            <td><input type="text" v-model="person.name" :disabled="isDisabled"></td>
            <td><input type="text" v-model="person.score" :disabled="isDisabled"></td>
            <td><input type="text" :value="person.time | dateFormart" disabled></td>
            <td>
                <a href="#" @click.prevent="edit">编辑</a>
                <a href="#" @click.prevent="del(index)">删除</a>
                <br/>
                <a href="#" @click.prevent="toggle">更多操作</a>
            </td>
        </tr>
    </table>
</div>
<script>
    Vue.filter("dateFormart", function (value, fmStr) {
        // console.log(fmStr);
        let date = new Date(value);
        let year = date.getFullYear();
        let month = date.getMonth() + 1 + "";
        let day = date.getDate() + "";
        let hour = date.getHours() + "";
        let minute = date.getMinutes() + "";
        let second = date.getSeconds() + "";
        if(fmStr && fmStr === "yyyy-MM-dd"){
            return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
        }
        return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(2, "0")}:${second.padStart(2, "0")}`;
    });
    // 这里就是MVVM中的View Model
    let vue = new Vue({
        el: '#app',
        // 这里就是MVVM中的Model
        data: {
            isDisabled:true,
            isShow: false,
            persons: [{
                id: 1,
                name: "zs",
                score: "99",
                time: Date.now()
            },{
                id: 2,
                name: "ls",
                score: "88",
                time: Date.now()
            },{
                id: 3,
                name: "ww",
                score: "88",
                time: Date.now()
            }],
            person: {
                id: "",
                name: "",
                score: ""
            }
        },
        // 专门用于存储监听事件回调函数
        methods: {
            edit(){
                this.isDisabled = !this.isDisabled;
            },
            toggle(){
                this.isShow = !this.isShow;
            },
            del(index){
                // console.log(index);
                this.persons.splice(index, 1);
            },
            add(){
                this.person.time = Date.now();
                this.persons.push(this.person);
                this.person = {
                    id: "",
                    name: "",
                    score: ""
                };
            },
            query(){
                let newPersons = this.persons.filter((person) => {
                    // console.log(person.score === this.person.score);
                    if(person.score === this.person.score){
                        return true;
                    }
                });
                // console.log(newPersons);
                this.persons = newPersons;
            }
        },
        // 专门用于定义计算属性的
        computed: {
        }
    });
</script>
</body>
</html>