v-for指令--列表渲染、列表过滤（computed和watch）、列表排序

v-for指令
1.用于展示列表数据
2.语法：v-for="(item,index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串、指定次数

<template>
<!-- 遍历数组 -->
<h2>列表渲染</h2>
<ul>
    <li v-for="p in persons" :key="p.id">{{p.name}}-----{{p.age}}</li>
</ul>
<!-- 遍历对象 -->
<h2>对象渲染</h2>
<ul>
    <li v-for="(value,keys) of cars" :key="keys">{{value}}-----{{keys}}</li>
</ul>
<!-- 遍历字符串 -->
<h2>遍历字符串</h2>
<ul>
    <li v-for="(value,index) of str" :key="index">{{value}}--{{index}}</li>
</ul>
<!-- 遍历指定次数 -->
<h2>遍历指定次数</h2>
<ul>
    <li v-for="(number,index) of 5" :key="index">{{number}}--{{index}}</li>
</ul>
</template>
<script setup>

import { watch,ref,reactive} from 'vue'
const persons=reactive([
    {id:1,name:'jhon',age:18},
    {id:2,name:'jack',age:19},
    {id:3,name:'simos',age:20}
])
const cars=reactive({
    name:'奥迪A8',
    price:'70w',
    color:'黑色'
})
const str=ref('hello')

</script>

列表过滤
1.通过watch监视完成过滤

<template>
<!-- 遍历数组 -->
<h2>列表渲染中key的原理</h2>
        <input type="text" placeholder="请输入需要搜索的名" 
        v-model="keyWords"
        />
<ul>
    <li v-for="p in filePersons" :key="p.id">
        {{p.name}}-----{{p.age}}-----{{p.sex}}

        </li>
    
</ul>


</template>
<script setup>

import { watch,ref,reactive} from 'vue'
let keyWords=ref('')
let persons=reactive([
    {id:1,name:'周杰伦',age:18,sex:'男'},
    {id:2,name:'马冬梅',age:19,sex:'女'},
    {id:3,name:'周冬雨',age:18,sex:'男'},
    {id:4,name:'夏雨',age:19,sex:'女'},
])
let filePersons=reactive([])
//使用watch方式进行模糊查询
watch(keyWords,(newValue,oldValue)=>{
   filePersons=persons.filter((item)=>item.name.indexOf(newValue)!==-1)
},{immediate:true})
</script>

2.通过computed计算属性完成过滤

<template>
<!-- 遍历数组 -->
<h2>列表渲染中key的原理</h2>
        <input type="text" placeholder="请输入需要搜索的名" 
        v-model="keyWords"
        />
<ul>
    <li v-for="p in filePersons" :key="p.id">
        {{p.name}}-----{{p.age}}-----{{p.sex}}

        </li>
    
</ul>


</template>
<script setup>

import { watch,ref,reactive, computed} from 'vue'
let keyWords=ref('')
let persons=reactive([
    {id:1,name:'周杰伦',age:18,sex:'男'},
    {id:2,name:'马冬梅',age:19,sex:'女'},
    {id:3,name:'周冬雨',age:18,sex:'男'},
    {id:4,name:'夏雨',age:19,sex:'女'},
])
let filePersons=computed(()=>{
    return persons.filter((item)=>item.name.indexOf(keyWords.value)!==-1)
})

</script>

列表排序

<template>
<!-- 遍历数组 -->
<h2>列表渲染中key的原理</h2>
        <input type="text" placeholder="请输入需要搜索的名" 
        v-model="keyWords"
        />
        <button @click="sortType=2">年龄升序</button>
        <button @click="sortType=1">年龄降序</button>
        <button @click="sortType=0">年龄原序</button>
<ul>
    <li v-for="p in filePersons" :key="p.id">
        {{p.name}}-----{{p.age}}-----{{p.sex}}

        </li>
    
</ul>


</template>
<script setup>

import { watch,ref,reactive, computed} from 'vue'
let keyWords=ref('')
let sortType=ref(0)//0代表原顺序，1代表降序，2代表升序
let persons=reactive([
    {id:1,name:'周杰伦',age:18,sex:'男'},
    {id:2,name:'马冬梅',age:129,sex:'女'},
    {id:3,name:'周冬雨',age:28,sex:'男'},
    {id:4,name:'夏雨',age:19,sex:'女'},
])
let filePersons=computed(()=>{
    
    let arr=persons.filter((item)=>item.name.indexOf(keyWords.value)!==-1)
    if(sortType.value){
        arr.sort((a,b)=>{
            return sortType.value===1?b.age-a.age:a.age-b.age
        })
    }
    return arr
})

</script>