VUE指令及用法大全——（五）v-for 循环

最新推荐文章于 2024-08-11 23:03:53 发布

最初都是小白

最新推荐文章于 2024-08-11 23:03:53 发布

阅读量2.3k

点赞数 2

分类专栏： Vue 文章标签： v-for v-for循环数组 v-for循环对象 v-for循环对象属性

本文链接：https://blog.csdn.net/Originally_M/article/details/89876536

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

语法：v-for:

使用时请注意：

1. 当Vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue则不是移动DOM元素来匹配数据项的顺序，而是简单复用此处的每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

2.为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key属性。

v-for循环普通数组、对象数组、以及对象属性，代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
</head>
<body>
    <div id="app" >
     		<h3>一、使用v-for循环普通数组</h3>
    		<!-- 循环遍历把数据放到p标签里 -->
        	<!-- <p v-for="(item,i) in arr">索引：{{i}},姓名：{{item}}</p> -->
       		<!-- 如果没有i可以省略小括号 -->
        	<p v-for="item in arr">姓名：{{item}}</p>
        	<hr/>
     		<h3> 二、使用v-for循环对象数组</h3>
     		<ul>
	            <li v-for="(item,i) in heros">
	                索引：{{i}} - ID: {{item.id}} - 
	                姓名：{{item.name}} - 年龄：{{item.age}}
	            </li>
	        </ul>
	        <hr/>
	 		<h3> 三、使用v-for循环对象上的属性</h3>
	  		<p v-for="(val,key) in obj">属性：{{key}},名称：{{val}}</p>
        	<p v-for="i in 5">{{i}}</p>
    </div>
<script>
    var vm = new Vue({
            el:'#app',
            data:{
               arr:['a','b','c'],
               heros:[{
                     id:0,
                     name:'a',
                     age:16
                  },
                  {
                      id:1,
                      name:'b',
                      age:17
                  },
                  {
                      id:2,
                      name:'c',
                      age:17
                  }],
                  obj: {
                      id:1,
                      name:'小美子',
                      age:17
                 }
            },
            methods:{
            }
    })
</script>
</body>
</html>