vueJS 012 crd 简易

最新推荐文章于 2022-06-14 11:09:34 发布

helloWorldAndYou

最新推荐文章于 2022-06-14 11:09:34 发布

阅读量144

点赞数

分类专栏： vue.js 前端

本文链接：https://blog.csdn.net/helloWorldAndYou/article/details/104906703

版权

前端同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

vue.js

20 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/vue2.6.11.js"></script>
    <style type="text/css">

    </style>
</head>
<body>
<div id="app">
    <div class="form-row form-check-inline">
        <div class="col">
            <input type="text" class="form-control" placeholder="学名" v-model="name">
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="生存状态" v-model="survive">
        </div>
        <div class="btn-group" role="group">
            <button class="btn-primary btn" @click="add">添加</button>
        </div>
        <div class="col">
            <input type="text" class="form-control" placeholder="请输入查询内容" v-model="keywords">
        </div>
    </div>
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">序号</th>
            <th scope="col">学名</th>
            <th scope="col">生存状态</th>
            <th scope="col">记录时间</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="plant in search3()" :key="plant.id">
            <td v-cloak>{{plant.id}}</td>
            <td v-cloak>{{plant.name}}</td>
            <td v-cloak>{{plant.survive}}</td>
            <td v-cloak>{{plant.ctime}}</td>
            <td>
                <button type="button" class="btn btn-outline-danger" @click="del2(plant.id)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            id: 3,
            name: "",
            survive: "",
            ctime: "",
            keywords:"",
            plants: [
                {id: 1, name: "百山祖冷杉", survive: "已灭绝", ctime: new Date()}
                , {id: 2, name: "普陀鹅耳枥", survive: "已灭绝", ctime: new Date()}
                , {id: 3, name: "松树", survive: "存在", ctime: new Date()}
            ]
        },
        methods: {
            add() {
                this.plants.push({id: ++this.id, name: this.name, survive: this.survive, ctime: new Date()});
            }
            , del2(id) {
                let index = this.plants.findIndex(item => {
                    if (item.id === id) {
                        return true;
                    }
                });
                this.plants.splice(index, 1);
            }
            , del3(id) {
                let index = this.plants.some((item, i) => {
                    if (item.id === id) {
                        this.plants.splice(id, 1);
                        return true;
                    }
                });
            }
            ,search2(){
                let rList=[];
                this.plants.forEach(item => {
                    if (item.name.indexOf(this.keywords)!=-1
                        || item.survive.indexOf(this.keywords)!=-1){
                        rList.push(item);
                    }
                });
                return rList;
            }
            ,search3(){
                return this.plants.filter(item => {
                    if (item.name.includes(this.keywords)
                        || item.survive.includes(this.keywords)){
                        return item;
                    }
                });
            }
        }
    });
</script>
</body>
</html>

helloWorldAndYou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vueJS 012 crd 简易

<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi...
复制链接

扫一扫

专栏目录