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, 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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章