SOURCE

var app = new Vue({
  el: '#app',
  data: {
    userList: [
      {
        id: 111,
        name: '隔壁老王',
        sex: '男'
      },
      {
        id: 222,
        name: '隔壁老李',
        sex: '男'
      },
      {
        id: 333,
        name: '隔壁老张',
        sex: '男'
      }
    ],
    userInfo:{
      id: 101,
      name: '小明',
      age: 18
    }
  }
})
//注意：数组层级太深改变数据视图不会更新 用vm.set()设置，或者数组reserve

<!-- vue js文件引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <h1>v-for</h1>
  <h2>1. 数组循环</h2>
  <ul>
    <li v-for="(item ,index) in userList" :key="index"> 
    <!-- 遍历数组生成list时候必须设置key 以保证及时更新dom -->
      <div class="id">{{item.id}}</div>
      <div class="name">{{item.name}}</div>
      <div class="sex">{{item.sex}}</div>
    </li>
  </ul>
  
  <div class="tips">tips: 在Vue实例创建后禁止使用下标更新数组数据，请用数组方法（push，unshift，splice...）或者整体赋值。</div>
  
   <h2>2. 对象循环</h2>
  <ul>
    <li v-for="(value ,key) in userInfo" :key="key">
      <div class="key">{{key}}</div>
      <div class="value">{{value}}</div>
    </li>
  </ul>
  
  <div class="tips">Tips: <a href="https://cn.vuejs.org/v2/guide/list.html" target="_blank">关于列表渲染更多请点击</a></div>
  

</div>

body {
  font-size: 14px;
}

h1 {
    font-size: 32px;
    font-weight: normal;
    border-left: 3px solid #2795EE;
    padding-left: 15px;
}

h2 {
    font-size: 18px;
    font-weight: normal;
    border-left: 3px solid #2795EE;
    margin: 0;
    padding-left: 15px;
    margin-left: 15px;
}

.tips {
  border: 1px solid #e86565;
  color: #e86565;
  padding: 5px 20px;
  text-align: center;
  margin: 20px;
  border-radius: 10px;
}


li {
  display: flex;
}

li > div{
  width: 100px;
  line-height:2;
  text-align: center;
  border: 1px solid #ddd;
}