vue——列表循环

Vue中的列表渲染

官网文档： https://cn.vuejs.org/v2/guide/list.html.

一、数组循环:

1、v-for中的in和of是一样的效果，二者都可以遍历数组和对象.建议使用v-for-of 更接近迭代器的语法.

2、(item,index) of list中的index代表下表标

3、:key="item.id中key值(唯一的)推荐使用item.id,为了提升性能(尽量别用index做key值)

4、修改数组内容的时候,不能直接通过修改index(list[下标])来修改数组,只能通过vue提供的几个数组遍历方法来操作数组,才能让数组发生变化,页面也跟着变化的效果:

 pop:删除数组最后一项;

 shift:删除数组的第一项;

 unshift:往数组第一项增加内容;

 push:往数组里增加一条内容;

 splice:数组截取;

 sort:数组排序;

 reverse:组数取反;

5、template模版占位符,可以帮助包裹元素,标签不会被渲染到页面上

<div id="app">
        //template模版占位符,可以帮助包裹元素,标签不会被渲染到页面上
	<template v-for="(item,index) of list" 
	     :key="item.id">//v-for-of 更接近迭代器的语法;index代表下表标记;key值推荐使用item.id
		<div>
			{
  {item.text}}-----{
  {index}}
		</div>
		<span>