VUE-列表

列表功能

如下例子

列表展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;

        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    
    <div id="test">
        <table class="table">
            <th>id</th>
            <th>name</th>
            <th>createTime</th>
            <th>operator</th>
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td><a href="#">delete</a></td>
            </tr>
        </table>
    </div>

    <script>

        var vm = new Vue({
            el: '#test',
            data:{
                list: [{id: 1, name: 'dany', ctime: new Date}, {id: 2, name: 'wenqun', ctime: new Date}]
            },
            // methods: {
            //     toggle() {
            //         this.flag = !this.flag
            //     }
            // }
        });
    </script>

</body>

</html>

数据是存放在data的list中的，将data中的数据通过v-for遍历给表格。

上方代码运行的效果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如果没有数据，增加提示

如果list中没有数据，那么表格中就会只显示表头<th>，这样显然不太好看。为此，我们需要增加一个v-if判断：当数据为空时，显示提示。如下：

			<tr v-show="list.length == 0">
				<td colspan="4">列表无数据</td>
			</tr>

item的添加

具体实现步骤如下：

（1）用户填写的数据单独存放在data属性里，并采用v-model进行双向绑定。

（2）用户把数据填好后，点击add按钮。此时需要增加一个点击事件的方法，将data中的数据放到list中（同时，清空文本框中的内容）。

（3）将数据展示出来。v-for有个特点：当list数组发生改变后，vue.js就会自动调用v-for重新将数据生成，这样的话，就实现了数据的自动刷新。

完整的代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse; /*???,???:???????????*/
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;
        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }

        .form {
            width: 800px;
            margin: 20px auto;
        }

        .form button {
            margin-left: 10px;
        }
    </style>
    </style>
</head>

<body>
    
    <div id="test">

        <div id="form">
            no:    <input type="text" v-model="formData.id">
            name:   <input type="text" v-model="formData.name">
            <button @click="addDate">add new data</button>

        </div>

        <table class="table">
            <th>id</th>
            <th>name</th>
            <th>createTime</th>
            <th>operator</th>
            <tr v-show="list.length == 0">
                <td colspan="4">no data</td>
            </tr>
            <tr v-for="item in list">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td><a href="#">delete</a></td>
            </tr>
        </table>
    </div>

    <script>

        var vm = new Vue({
            el: '#test',
            data:{
                list: [{id: 1, name: 'tom', ctime: new Date}, {id: 2, name: 'jack', ctime: new Date}],
                formData: {
                    id: 0,
                    name: ""
                }
            },
            methods: {
                addDate() {
                    this.list.push({id: this.formData.id, name: this.formData.name, ctime: new Date()});
                    this.formData.id=0;
                    this.formData.name='';

                }
            }
        });
    </script>

</body>

</html>

item的删除

        <!--绑定delete事件，根据括号里的参数进行删除-->
        <td><a href="#" v-on:click="delData(item.id)">删除</a></td>

        delData: function (id) {
            // 0 提醒用户是否要删除数据
            if (!confirm('是否要删除数据?')) {
                //当用户点击的取消按钮的时候，应该阻断这个方法中的后面代码的继续执行
                return;
            }

            // 1 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值（在数组中的索引值）
            var index = this.list.findIndex(function (item) {
                return item.id == id
            });

            // 2.0 调用方法：list.splice(待删除的索引, 删除的元素个数)
            this.list.splice(index, 1);
        }

 // 根据id得到下标

    // 默认去遍历list集合，将集合中的每个元素传入到function的item里，
    var index = this.list.findIndex(function(item){
    //根据item中的id属性去匹配传进来的id
    //如果是则返回true ；否返回false,继续下面的一条数据的遍历，以此类推
    return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的index
    });

也就是说，我们是根据 item.id 找到这个 item 是属于list 数组中的哪个index索引。找到了index，就可以根据index来删除数组中的那个元素了。

当item被删除后，v-for会被自动调用，进而自动更新view。

按条件筛选item

现在要求实现的效果是，在搜索框输入关键字 keywords，列表中仅显示匹配出来的内容。也就是说：

之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的。
现在，我们在使用v-for进行遍历显示的时候，不能再遍历全部的 list 了；我们要自定义一个 search 方法，同时，把keywords作为参数，传递给 search 方法。即v-for="item in search(keywords)"。

在 search(keywords) 方法中，为了获取 list 数组中匹配的item，我们可以有两种方式实现。如下。

方式一：采用`forEach + indexOf()`

search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item

    //实现方式一：通过 indexOf() 进行匹配。
    var newList = [];
    this.list.forEach(item => {
        if (item.name.indexOf(keywords) != -1) {  //只要不等于 -1，就代表匹配到了
            newList.push(item)
        }
    })
    return newList
}

上方代码中，我们要注意 indexOf(str) 的用法。举例如下：

    var str = 'smyhvae';

    console.log(str.indexOf('s'));  //打印结果：0

    console.log(str.indexOf(''));   //打印结果：0。（说明，即使去匹配空字符串，也是返回0）

    console.log(str.indexOf('h'));  //打印结果：3

    console.log(str.indexOf('x'));  //打印结果：-1 （说明，匹配不到任何字符串）

上方代码中，也就是说，如果参数为空字符串，那么，每个item都能匹配到。

方式二： filter + includes()方法

search(keywords) { // 根据关键字，进行数据的搜索，返回匹配的item

    var newList = this.list.filter(item => {
        // 注意 ： ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符串')
        //  如果包含，则返回 true ，否则返回 false
        if (item.name.includes(keywords)) {
            return item
        }
    })

    return newList
}

注意：forEach some filter findIndex，这些都属于数组的新方法，都会对数组中的每一项，进行遍历，执行相关的操作。这里我们采用数组中的 filter 方法，

总的来说，方式二的写法更优雅，因为字符串的 includes()方法确实很实用。

完整版代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

    <style>
        .table {
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse; /*???,???:???????????*/
        }

        .table th {
            background: #0094ff;
            color: white;
            font-size: 16px;
            border: 1px solid black;
            padding: 5px;
        }

        .table tr td {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border: 1px solid black;
        }

        .form {
            width: 800px;
            margin: 20px auto;
        }

        .form button {
            margin-left: 10px;
        }
    </style>
    </style>
</head>

<body>
    
    <div id="test">

        <div id="form">
            no:    <input type="text" v-model="formData.id">
            name:   <input type="text" v-model="formData.name">
            <button @click="addDate">add new data</button>
            search:
            <input type="text"  v-model="keyWords">

        </div>

        <table class="table">
            <th>id</th>
            <th>name</th>
            <th>createTime</th>
            <th>operator</th>
            <tr v-show="search(keyWords).length == 0">
                <td colspan="4">no data</td>
            </tr>
            <tr v-for="item in search(keyWords)">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.ctime}}</td>
                <td><a href="#" @click="delDate(item.id)">delete</a></td>
            </tr>
        </table>
    </div>

    <script>

        var vm = new Vue({
            el: '#test',
            data:{
                list: [{id: 1, name: 'tom', ctime: new Date}, {id: 2, name: 'jack', ctime: new Date}],
                formData: {
                    id: 0,
                    name: ""
                },
                keyWords: ""
            },
            methods: {
                addDate() {
                    this.list.push({id: this.formData.id, name: this.formData.name, ctime: new Date()});
                    this.formData.id=0;
                    this.formData.name='';

                },
                delDate: function (id) {
                    if (!confirm("whether to delete the date?")) {
                        return;
                        
                    }
                    var index = this.list.findIndex(function (item) {
                        return item.id==id
                        
                    });
                    this.list.splice(index,1)
                    
                },
                search(keyWords) {
                var newList = this.list.filter(item=>{
                    if (item.name.includes(keyWords)) {
                        return item
                        
                    }
                })
                return newList
            }
            }
            
        });
    </script>

</body>

</html>