VUE初学--列表渲染v-for

最新推荐文章于 2023-11-27 08:41:42 发布

前端大流中的小菜鸡

最新推荐文章于 2023-11-27 08:41:42 发布

阅读量827

点赞数

分类专栏： VUE 文章标签： VUE初学--列表循环v-for

本文链接：https://blog.csdn.net/qq_42970981/article/details/103121239

版权

本文介绍了Vue中的v-for指令，用于基于数组和对象进行列表渲染。讲解了v-for的基本语法，如v-for='item in itemList'，以及如何使用索引，遍历对象并指定key属性的重要性，强调了在数据变更时Vue的默认更新策略和key属性对DOM重用的意义。

摘要由CSDN通过智能技术生成

列表渲染 v-for
v-for 指令基于一个数组来渲染一个列表，需要用 v-for = " item in itemList " 或者 v-for = " item of itemList " 形式特殊的语法，itemList 是元数据素组， item 是被迭代的数组元素的别名
注：我们可以用 of 替代 in 作为分隔符，它更接近 JavaScript 迭代器的语法

	<div id="#app">
		<ul>
			<li v-for="item in itemList">
                {
   {
    item.name }} --- {
   {
    item.authorName }}
            </li>
            // <li v-for="item of itemList">
                // {
   { item.lname }}
            // </li>
		</ul>
	</div>
	<script>
		var vm = new Vue({
   
			el:'#app',
			data:{
   
				itemList:[
					{
   name:'成都', authorName: '赵雷'},
                    {
   name:'冰城姑娘', authorName: '刘鹏鹏'},
                    {
   name:'春风十里', authorName: '鹿先森乐队'},
                    {
   name:'我曾'<