學習Vue 入門到實戰——學習筆記（二）

時間 2019-11-06

標籤學習 vue 入門實戰筆記简体版

原文原文鏈接

閒聊：

哈哈哈！過了好幾天才更新博客啦，嘻嘻，立刻過年了，你們最近是否是都開心的快飛起來了，小穎好幾個朋友公司都已經放假了，但是咱們公司要等到臘月29上完班纔給放假，哎！心情不美氣的很，用我以前大學舍友的話就是心情疼的很！！！！！，不知道你們都爲過年準備了什麼？或者有什麼所指望的呢？準備：小穎準備減肥哈哈哈，這幾天天天下班後堅持去舞蹈教室跟着老師學《和我交往吧》，舞蹈很萌很可愛，奈何我這糙漢子的心裏，表現不出來那種萌的感受，老師說跳這支舞蹈的時候，就要讓人產生那種想要把你抱走的感受，但是我感受我跳的時候簡直是辣眼睛啊，不事後期學完了，小穎想錄個視頻，也算是給本身一個交代吧，畢竟花了那麼多錢學了那麼久，嘻嘻，錢不能浪費；指望：小穎指望過完年後，不要長胖，畢竟過年就是各類吃，在本身家吃，在親戚家吃·················想一想都好開心哈哈哈哈。最後呢小穎提早祝你們：新年快樂，豬年大吉！css

內容：

今天給你們分享下：實現對vue的data屬性中的數據進行：增長、刪除、查詢操做。html

前期準備：vue.jsbootstrap.min.css。

效果圖：vue

公用代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue測試</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/vue.js"></script>
    <style>
        .table-content {
            padding-top: 20px;
        }

        .table-content a,
        .table-content a:hover {
            cursor: default;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">添加、刪除、查詢</div>
        <div class="panel-body form-inline">
            <div class="form-group">
                <label for="exampleInputId">Id：</label>
                <input type="text" class="form-control" id="exampleInputId" v-model="id">
            </div>
            <div class="form-group">
                <label for="exampleInputName">Name：</label>
                <input type="text" class="form-control" id="exampleInputName" v-model="name">
            </div>
            <button type="submit" class="btn btn-primary" @click="add">添加</button>
            <div class="form-group">
                <label for="searchName">搜索名稱關鍵字：</label>
                <input type="text" class="form-control" id="searchName" v-model="keywords">
            </div>
        </div>
    </div>

    <div class="table-content">
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>operation</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in user">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td><a @click.prevent="del(item.id)">刪除</a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '',
            user: [{
                id: '1',
                name: '李琪琪',
                ctime: new Date()
            }, {
                id: '2',
                name: '小穎穎',
                ctime: new Date()
            }, {
                id: '3',
                name: '大黑熊',
                ctime: new Date()
            }]
        },
        methods: {}
    });
</script>
</body>
</html>

在 methods 屬性中添加如下代碼：bootstrap

1.增長：

            add() {
                this.user.push({id: this.id, name: this.name, ctime: new Date()});
                this.id = '';
                this.name = '';
            }

2.刪除：

            del(id) {
                //在數組的some方法中，若是return true,就會當即終止對這個歌數組的循環。
                // this.user.some((item, i) => {
                //     if (item.id == id) {
                //         this.user.splice(i, 1);
                //         return true;
                //     }
                // });
                var index = this.user.findIndex(item => {
                    if (item.id == id) {
                        return true;
                    }
                });
                this.user.splice(index, 1);
            }

3.查詢：

這時須要把html中的 tbody 內的代碼改成：數組

            <tbody>
            <tr v-for="item in search(keywords)">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td><a @click.prevent="del(item.id)">刪除</a></td>
            </tr>
            </tbody>

jsapp

            search(keywords) {
                // var newList = [];
                // this.user.forEach(item => {
                //     if (item.name.indexOf(keywords) != -1) {
                //         newList.push(item);
                //     }
                // });
                // return newList;
                return this.user.filter(item => {
                    if (item.name.includes(keywords)) {
                        return item;
                    }
                })
            }

快過年啦，能不能給小穎個小紅包呢，嘻嘻，求點贊，求打賞哦！謝謝啦測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。