11~vue中列表渲染v-for

vue中列表渲染v-for

v-for遍历数组

我们用v-for指令基于一个数组来渲染一个列表。

v-for语法

item in items

• 其中 items 是源数据数组
• item 则是被迭代的数组元素的别名

示例

<script>
export default {
  data () {
    return {    
       person:['张三','李四','王五']      
    }   
  },
  methods: {
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
    <ul>
      <!-- key是给列表项加上唯一的标识 -->
      <li v-for="item in person" :key="item">
      {{ item }}
      </li>
    </ul>    
  </div>
</template>
<style>
</style>

效果

v-for支持可选的第二个参数

(item,index) in items

• 其中 items 是源数据数组
• item 则是被迭代的数组元素的别名
• index当前项的索引值, 可以省掉, 就是第一种写法了

示例

<script>
export default {
  data () {
    return {    
       person:['张三','李四','王五']      
    }   
  },
  methods: {
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
    <ul>
      <!-- key是给列表项加上唯一的标识 -->
      <li v-for="(item,index) in person" :key="index">
      {{ item }}---{{ index }}
      </li>
    </ul>   
  </div>
</template>
<style>
</style>

of替代in作为分隔符

我们也可以用of替代in作为分隔符, 因为这样更接近JavaScript迭代器的语法

item of items

<script>
export default {
  data () {
    return {    
       person:['张三','李四','王五']      
    }   
  },
  methods: {
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
    <ul>
      <!-- key是给列表项加上唯一的标识 -->
      <li v-for="item of person" :key="item">
      {{ item }}
      </li>
    </ul>   
  </div>
</template>
<style>
</style>

v-for遍历对象

只遍历键值

<li v-for="item of personObj" :key="item">
        {{ item }}
</li> 

• item 是键值
• personObj 是源数据对象

遍历加上键名

<li v-for="(item,key) of personObj" :key="key">
        {{ key }}---{{ item }}
</li>   

• item 是键值
• key 是键名
• personObj 是源数据对象

遍历加上索引

<li v-for="(item,key,index) of personObj" :key="key">
        {{index}}---{{ key }}---{{ item }}
</li>   

• item 是键值
• key 是键名
• index 是索引
• personObj 是源数据对象

示例

<script>
export default {
  data () {
    return {    
       personObj:{
        name:'张三',
        age:18,
        class:'三班'
       }  
    }   
  },
  methods: {
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <!-- template就是模版 -->
  <div>
    <ul>
      <!-- key是给列表项加上唯一的标识 -->
      <!-- item是键值  -->
      <li v-for="item of personObj" :key="item">
        {{ item }}
      </li>      
    </ul>   
    <ul>
      <!-- item是键值,key是键名 -->
      <li v-for="(item,key) of personObj" :key="key">
        {{ key }}---{{ item }}
      </li>      
    </ul>   

    <ul>
      <!-- item是键值,key是键名,index是索引 -->
      <li v-for="(item,key,index) of personObj" :key="key">
        {{index}}---{{ key }}---{{ item }}
      </li>      
    </ul>   
  </div>
</template>
<style>
</style>

效果

v-for遍历必须加key

key是为了给vue一个提示, 以便它能跟踪每个节点的身份, 从而重用和重新排序现有元素, 我们需要为每个列表项提供一个唯一的 key attribute;

key 唯一标识, 快速找到DOM节点, 减少渲染次数, 提升渲染性能。