vue-循环渲染

<template id="app">
<!--  在vue中v-for指令可以实现把一个数据渲染为列表视图 v-for指令需要一种特殊的语法 item in list-->
<div v-for="item in list">
  {{item.name}}
</div>
<!--  在v-for指令中也可以当前遍历项的索引-->
 <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对象的数据 值 键 索引-->
 <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(): 对列表进行分割操作-->
<!--  sort(): 对列表进行排序操作-->
<!--  reverse():对列表进行逆序-->

<!--  下面定义一个按钮实现对list的逆序-->
 <button @click="click">逆序排列</button>
<!--  在实际的开发中 原始的数据并不适合直接渲染 v-for支持渲染之前的额外处理 可以定义一个handle函数-->
</template>

<script>
export default {
 name: "loop-render",
 data() {
   return {
     // list: [1,2,3,4,5],
     // 在渲染对象数据时 可以这样写
     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>