<template id="app">
<!-- ?在vue中v-for指令可以實現(xiàn)把一個數(shù)據(jù)渲染為列表視圖 v-for指令需要一種特殊的語法 item in list-->
<div v-for="item in list">
? {{item.name}}
</div>
<!-- ?在v-for指令中也可以當(dāng)前遍歷項的索引-->
?<ul>
? ?<li v-for="(item, index) in list">
? ? ?<div>{{index+'.&nbsp;&nbsp;&nbsp;'+item.name}}</div>
? ? ?<div>{{'company:&nbsp;&nbsp;'+item.company}}</div>
? ?</li>
?</ul>
<!-- ?同樣可以使用有序列表來加載person對象的數(shù)據(jù) 值 鍵 索引-->
?<ol>
? ?<li v-for="(value,key,index) in person">
? ? ?<div>{{index}}&nbsp;&nbsp;&nbsp;{{key}}:{{value}}</div>
? ?</li>
?</ol>
<!-- ?v-for的高級用法-->
<!-- ?push(): 在列表的尾部追加一個元素-->
<!-- ?pop(): 刪除列表尾部的一個元素-->
<!-- ?shift(): 在列表的頭部追加一個元素-->
<!-- ?unshift(): 刪除列表頭部的一個元素-->
<!-- ?splice(): 對列表進(jìn)行分割操作-->
<!-- ?sort(): 對列表進(jìn)行排序操作-->
<!-- ?reverse():對列表進(jìn)行逆序-->

<!-- ?下面定義一個按鈕實現(xiàn)對list的逆序-->
?<button @click="click">逆序排列</button>
<!-- ?在實際的開發(fā)中 原始的數(shù)據(jù)并不適合直接渲染 v-for支持渲染之前的額外處理 可以定義一個handle函數(shù)-->
</template>

<script>
export default {
?name: "loop-render",
?data() {
? ?return {
? ? ?// list: [1,2,3,4,5],
? ? ?// 在渲染對象數(shù)據(jù)時 可以這樣寫
? ? ?list: [{
? ? ? ?name: '嘉然',
? ? ? ?company: 'bytes_dance'
? ? ?},
? ? ? ?{
? ? ? ? ?name: '星瞳',
? ? ? ? ?company: 'tencent',
? ? ? ?},
? ? ? ?{
? ? ? ? ?name: '露米',
? ? ? ? ?company: 'perfect_world',
? ? ? ?}],
? ? ?person: {
? ? ? ?name: '嘉然',
? ? ? ?age: '26',
? ? ? ?company: 'bytes_dance',
? ? ? ?birth: '03-05',
? ? ? ?tel: '*******'
? ? ?}
? ?}
?},

?methods:{
? ?click() {
? ? ?this.list.reverse()
? ?},
?},
}
</script>

<style scoped>
?div{
? ?color: #2a9fde;
?}
?li{
? ?list-style: none;
?}
?ol>li>div{
? ?color: #de9de5;
?}
?button{
? ?color: #de9de5;
? ?background-color: #d3e9ef;
? ?border: 1px solid #c5bcbc;
?}
?button:hover{
? ?border: 2px solid #c5bcbc;
?}
</style>