Vue.js列表渲染与数据操作-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45847167/article/details/105527632

1.指令

数组: v-for / index

对象: v-for / key

2.列表的更新显示

删除 item

替换 item

3.列表的高级处理

列表过滤

列表排序

4.编码

编码 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-列表渲染-1</title>
</head>
<body>
<div id="app-6-1">
    <h2>1、测试 v-for 遍历数组</h2>
    <ul>
        <li v-for="(person, index) in persons" :key="index">
            下标：{{index}}    id：{{person.id}}    姓名：{{person.name}}   年龄：{{person.age}}
            --<button @click="updatePerson(index, {name: 'cat', age: 18})">修改</button>
            --<button @click="deletePerson(index)">删除</button>
        </li>
    </ul>

    <h2>2、测试 v-for 遍历对象</h2>
    <ul>
        <li v-for="(value, key) in persons[0]">
            Person对象 key: {{key}}, value: {{value}}
        </li>
    </ul>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app-6-1',
        data: {
            persons: [
                {id: 1, name: 'tom', age: 10},
                {id: 2, name: 'jerry', age: 20},
                {id: 3, name: 'harry', age: 30}
            ]
        },
        methods: {
            updatePerson(index, person) {
                this.persons.splice(index, 1, person)
            },
            deletePerson(index) {
                this.persons.splice(index, 1)
            }
        }
    });
</script>
</body>
</html>

编码 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-列表渲染-2</title>
</head>
<body>
<div id="app-6-2">
    <input type="text" name="searchByName" placeholder="根据名称搜索指定用户" v-model="searchByName"/>
    <ul>
        <li v-for="(person, index) in filterPersons" :key="index">
            下标：{{index}}    id：{{person.id}}    姓名：{{person.name}}   年龄：{{person.age}}
        </li>
    </ul>
    <button @click="setOrderType(0)">默认顺序</button>
    <button @click="setOrderType(1)">年龄升序</button>
    <button @click="setOrderType(2)">年龄降序</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app-6-2',
        data: {
            orderType: 0,
            searchByName: '',
            persons: [
                {id: 1, name: 'tom', age: 10},
                {id: 2, name: 'jerry', age: 5},
                {id: 3, name: 'harry', age: 30}
            ]
        },
        methods: {
            setOrderType(type) {
                this.orderType = type
            }
        },
        computed: {
            filterPersons() {
                let {orderType, searchByName, persons} = this;
                //过滤
                persons = persons.filter(p => p.name.indexOf(searchByName) !== -1);
                //排序
                if (orderType !== 0) {
                    // 突然发现java中lambda 表达式和js写法基本一致
                    persons = persons.sort((p1, p2) => {
                        if (orderType === 1) {
                            return p1.age - p2.age
                        } else {
                            return p2.age - p1.age
                        }
                    })
                }
                return persons
            }
        }
    });
</script>
</body>
</html>