vue学习004

最新推荐文章于 2024-08-26 13:26:44 发布

101之歌

最新推荐文章于 2024-08-26 13:26:44 发布

阅读量98

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qxf1374268/article/details/89740090

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

优化版的增删改查demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增删改查</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <div style="padding: 30px">
        名称：<input type="text" v-model="name"/>
        价格：<input type="text" v-model="price" v-on:keyup.enter="add()"/>
        <input type="button" value="新增" style="font-size: 200px" v-on:click="add()"/>
        根据名称查询：<input type="text" v-model="keyword"/>
    </div>
    <table border="1" cellspacing="0" style="color: blue;margin: 30px;width: 550px;text-align: center">
        <tr>
            <td>名称</td>
            <td>价格</td>
            <td>时间</td>
            <td>删除</td>
        </tr>
        <tr v-for="i in search(keyword)">
            <td>{{i.name}}</td>
            <td>{{i.price}}</td>
            <td>{{i.time | dateFormat}}</td>
            <td>
                <input type="button" value="删除" style="font-size: 80px" v-on:click="del(i.name)"/>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    Vue.filter('dateFormat',function (dateStr) {
        var dt = new Date(dateStr);
        var yy = dt.getFullYear();
        var mm = (dt.getMonth()+1).toString().padStart(2,'0');
        var dd = dt.getDate().toString().padStart(2,'0');
        var hh = dt.getHours().toString().padStart(2,'0');
        var MM = dt.getMinutes().toString().padStart(2,'0');
        var ss = dt.getSeconds().toString().padStart(2,'0');
        return `${yy}-${mm}-${dd} ${hh}:${MM}:${ss}`;
    });
    var app = new Vue({
        el:'#app',
        data:{
            list:[
                {name:'奔驰',price:'30万',time:new Date()},
                {name:'宝马',price:'120万',time:new Date()},
                {name:'红旗',price:'3万',time:new Date()},
            ],
            name:'',
            price:'',
            keyword:''
        },
        methods: {
            del(name) {
                this.list.some((item, i) => {
                    if (item.name === name) {
                        this.list.splice(i, 1);
                        return true;
                    }
                })
            },
            add() {
                this.list.push({name:this.name,price:this.price,time:new Date()})
            },
            search(keyword){
                return this.list.filter(item=>{
                    if(item.name.includes(keyword)){
                        return item;
                    }
                })
            }

        }
    })
</script>
</html>