v-for , vue指令

一.结构:

  可以遍历数组 / 对象 / 数字/字符串(可遍历结构)

 

  v- for 可以理解成 把一组数据,渲染成一组DOM

v-for 语法: 

1.v-for="(值, 索引) in 目标结构"

2.v-for="值 in 目标结构"

例:

<template>
  <div id="app">
      <div id="app">
          <!-- v-for 把一组数据,渲染成一组 DOM -->
          <!-- 口诀:让循谁的环生成,v-for就写谁身上 -->
          <p>学生姓名</p>
          <ul>
       <li v-for="(item, index) in arr" :key="item">
         {{index}} - {{item}}
       </li>
          </ul>
          <p>学生详细信息</p>
          <ul>
              <li v-for="obj in stuArr" :key = "obj.id">
                  <span>{{obj.name}}</span>
                  <span>{{obj.sex}}</span>
                  <span>{{obj.hobby}}</span>
              </li>
          </ul>
          <p>老师信息</p>
           <div v-for="(value, key) in tObj" :key="value">
        {{ key }} -- {{ value }}
      </div>

      <!-- v-for 遍历数组(了解) -从1开始 - -->
      <p>序号</p>
      <div v-for="i in count" :key="i" >
          {{ i }}
        </div>
      </div>
  </div>
</template>

<script>

export default {
  name: '',
  methods: {
  }
}
</script>

<style scoped>

</style>

注意:

1.谁让循环生成,v-for 就写在谁身上

2.v-for的临时变量名不能用到v-for范围外

3.避免v-for 和 v-if 在一起使用,因为在Vue 处理指令时,v-for 比 v-if 具有更高级的优先级