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>