vue专栏 02.vue基础语法 05.v-for 02.案例

# 02.v-for案例

[toc]{type: "ol", level: [3,4]}

### v-for案例
#### css结构
```css
body {
    text-align: center;
}
ul li {
    /*去掉圆点*/
    list-style: none;
    line-height: 30px;
}
```

#### js结构
-
```js
const app = Vue.createApp({
    data() {
        return {
            // 数据
            persons: [
                {id:1, name: '王一', sex: '女', age:24, phone: '15145368742'},
                {id:2, name: '贾二', sex: '男', age:22, phone: '15175847859'},
                {id:3, name: '张三', sex: '女', age:20, phone: '13885874930'},
                {id:4, name: '李四', sex: '男', age:18, phone: '13889059849'},
                {id:5, name: '赵五', sex: '女', age:16, phone: '15984995858'},
                {id:6, name: '王六', sex: '男', age:16, phone: '15957589443'},
                {id:7, name: '孙七', sex: '女', age:18, phone: '13586939595'},
                {id:8, name: '赵八', sex: '男', age:20, phone: '13584884940'},
                {id:9, name: '李九', sex: '女', age:22, phone: '17634589555'},
            ],

            // 关联搜索框
            searchStr: '',

            // flag: 0:默认    1:升序    2:降序
            orderType: 0,
        }
    },
    computed: {
        filterPersons() {
            // 1.取出相关的属性
            const {persons, searchStr, orderType} = this;
            // 2.定义过滤数组 [深拷贝 防止原数组被改变]
            let arr = [...persons];
            // 3.根据条件过滤
            if (searchStr.trim()) {
                arr = persons.filter((p) => {
                    return p.name.indexOf(searchStr) !== -1;
                    }
                )
            }
            // 4.排序
            if(orderType) {
                arr.sort((p1, p2) => {
                        if(orderType===1) {
                            // 升序
                            return p1.age - p2.age;
                        }else {
                            return p2.age - p1.age;
                        }
                    }
                )
            }
            // 5.返回过滤后的数组
            return arr;
        }
    },
    methods: {
        setOrderType(orderType) {
            // 通过传递参数，改变orderType的值
            this.orderType = orderType;
        }
    }
}).mount('#app');
```

#### html结构
- 动态绑定key: 
> 唯一标识符
- 提高效率：
> 不绑定key时，采用Different算法
> 插入一个值时，后面的所有值都要变动1个位置
- 防止未知错误：
> 在进行数据头部追加时，会出现错误现象
```html
<div id="app">
    <h3>搜索列表</h3>
    <label>
        <input type="text" placeholder="姓名" v-model="searchStr">
    </label>
    <div>
        <h3>排序</h3>
        <button @click="setOrderType(0)">默认</button>
        <button @click="setOrderType(1)">年龄🔼</button>
        <button @click="setOrderType(2)">年龄🔽</button>
    </div>
    <ul>
        <!--
        -->
        <li v-for="(p, index) in filterPersons" :key="p.id">
            {{index + 1}} 姓名: {{p.name}} &nbsp; 性别: {{p.sex}} &nbsp; 年龄: {{p.age}} &nbsp; 电话: {{p.phone}} &nbsp;
        </li>
    </ul>
</div>
```
![v-for案例](imgs/02.v-for案例.png)