闲聊：

     哈哈哈！过了好几天才更新博客啦，嘻嘻，马上过年了，大家最近是不是都开心的快飞起来了，小颖好几个朋友公司都已经放假了，可是我们公司要等到腊月29上完班才给放假，哎！心情不美气的很，用我之前大学舍友的话就是心情疼的很！！！！！，不知道大家都为过年准备了什么？或者有什么所期望的呢？准备：小颖准备减肥哈哈哈，这几天每天下班后坚持去舞蹈教室跟着老师学《和我交往吧》，舞蹈很萌很可爱，奈何我这糙汉子的内心，表现不出来那种萌的感觉，老师说跳这支舞蹈的时候，就要让人产生那种想要把你抱走的感觉，可是我感觉我跳的时候简直是辣眼睛啊，不过后期学完了，小颖想录个视频，也算是给自己一个交代吧，毕竟花了那么多钱学了那么久，嘻嘻，钱不能浪费；期望：小颖期望过完年后，不要长胖，毕竟过年就是各种吃，在自己家吃，在亲戚家吃·················想想都好开心哈哈哈哈。最后呢小颖提前祝大家：新年快乐，猪年大吉！

内容：    

       今天给大家分享下：实现对vue的data属性中的数据进行：增加、删除、查询操作。

前期准备：vue.jsbootstrap.min.css。

效果图：

公用代码：

<!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 属性中添加以下代码：

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.查询：

            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;
                    }
                })
            }

 快过年啦，能不能给小颖个小红包呢，嘻嘻，求点赞，求打赏哦！谢谢啦

 

内容来源于网络如有侵权请私信删除
标签： Swift编程 Swift开发 Swift技术文章 IOS
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！