vue的循环遍历(v-for)

时间：2025-01-17 13:46:23

1.循环遍历

1.循环遍历:
    vue的循环遍历用v-for，语法类似于js中的for循环
    当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
2.v-for使用格式：
   格式为：v-for = "item in items"
          (遍历items中的数据)

-for遍历数组

1.v-for遍历数组
     用v-for指令基于一个数组来渲染一个列表。
     v-for 指令使用item in items形式的语法，
     其中items是源数据数组， 而item则是被迭代的数组元素。

* 如果v-for遍历数组中的数组值
   语法格式：v-for="movie in movies"
   依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
     <li v-for="movie in movies"> {{movie}} </li>

* 如果v-for遍历数组中的数组值、索引值
     语法格式：v-for=(item, index) in items
      v-for中使用二个参数，即当前项和当前项的索引
      <li v-for="(item, index) in items">{{index}}. {{item}}</li>

<div id="app">
	<!-- 1.在遍历过程中没有使用索引值 -->
	<ul>
		<li v-for="item in names">{{item}}</li>
	</ul>
	<!-- 2.在遍历的过程中获取索引值 -->
	<ul>
		<li v-for="(item,index) in names">{{index+1}} {{item}}</li>
	</ul>
</div>
<script src="../js/"></script>
<script>
const app = new Vue({
	el: "#app",
	data: {
		names: ['why', 'kobe', 'james', 'curry']
	}
})
</script>

-for遍历对象

v-for遍历对象：
 1.遍历对象属性 用value值
 2.遍历对象属性和属性值 用value值和key
 3.遍历对象属性和属性值和索引 用value值、key和index

<div id="app">
	<!-- 1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value -->
	<ul>
	    <li v-for="item in info">{{item}}</li>
	</ul>
	<!-- 2.获取key和value格式 (value,key) -->
	<ul>
	    <li v-for="(value,key) in info">{{value}}-{{key}}</li>
	</ul>
	<!-- 3.获取key和value和index格式 (value,key,index) -->
	<ul>
	    <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
	</ul>
</div>
<script src="../js/"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            info: {
                name: 'why',
                age: 18,
                height: 1.88
            }
        }
    })
</script>

-for使用中添加key

在遍历数组时可以在元素中绑定一个key，key=数组值
绑定key的作用 ：**主要是为了高效的更新虚拟DOM**。(vue内部；让性能高一点)
* 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点，
   则Diff算法默认执行起来是比较复杂的。(一个个重新替换)
* 但绑定key后，可以使用key来给每个节点做一个唯一标识
   Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

<div id="app">
	<ul>
	   <li v-for="item in letters" :key="item">{{item}}</li>
	</ul>
</div>
<script src="../js/"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            letters: ['a', 'b', 'c', 'd', 'e']
        }
    })
</script>

相关文章