v-for 语法易错点

v-for 循环数组

1.v-for 后的写法
错误写法：v-for（book in booklist）
正确写法：v-for = 'book in booklist'
2.book 代表的含义
循环 booklist 数组时，定义了一个名为 book 的变量，每次循环都将数组中的每个元素依次赋值给 book 变量。所以使用 v-for 后的结果时，插值表达式 {{}}内的值应该写 book这个变量。变量是不需要带双引号的。
3.v-for 后如果需要获取下标 index，则需要传入两个参数，两个参数的写法也是易错点。
错误写法：
<li v-for='(book index)in bookList'>{{index+1}}、{{book}}</li>这里的错误写法是两个参数没有用,隔开。
正确写法：
首先将两个参数用()包起来，其次两个参数之间用,隔开。如：<li v-for = '(book,index) in bookList'>{{index+1}}、{{book}}</li>
4.v-for 后两个参数分别代表的含义
v-for 默认第一个参数始终代表的变量，第二个参数始终代表的是下标。

v-for 循环数组对象

v-for 循环后，定义的变量代表的含义。在数组对象中，定义的变量 goods 它的值代表的是数组中的每一个元素，只不过数组中的每一个元素是一个对象。所以在使用 {{}} 插值表达式显示每个对象的值时，需要使用 goods.name goods.author获取 goods 对象内 name author 的属性值。
错误写法：

正确写法：

<li v-for='goods in goodsList'>
	<p>{{goods.name}}</p>
	<p>{{goods.author}}</p>
</li>

v-for 循环数字

1.v-for 循环数字，由于 num 是一个数值，所以在写v-for 语句的时候，会觉得只有一个数值，就不用定义变量来存储每次循环的值。所以会有下面这样错误的写法。
<li v-for='num'>{{num}}</li>
其实，num 代表的含义是循环的终点值是某个数值。所以还是需要定义变量，来存储目标数值和目标数值之前的数值。比如 num 的值是 8，n 代表的含义是 1 2 3 4 5 6 7 8
正确的写法如下：<li v-for='(n,idx) in num'>{{idx}}、{{n}}</li>
渲染的结果如下：

2.num 的初始值最小是 1 如果是 0 页面不会渲染出任何内容。

v-for 循环对象

错误写法1：

p 此时就已经代表了对象的属性值，所以 person.p 没有任何意义。
错误写法2：

这个错误和上面的错误一样，误认为 p 代表的是键，所以person[p] 没有任何意义。
错误写法3：

这里还没意识到 p 其实已经代表了对象的值，所以想用字符串拼接的方法得出想要的结果，其实也没有任何意义。
通过上面的错误写法可以得出一个结论，v-for 后只有一个参数时，定义的变量代表的是属性的值。想要获取对象的键，此时需要传入第二个参数。而且第一个参数始终代表的是值，第二个参数始终代表的是键。正确写法如下：

<li v-for='(val,key) in person'>
	{{key}}：{{val}}
</li>

使用字符串拼接的方法显示数据也可以

<li v-for='(val,key) in person'>
	{{key+":"+val}}
</li>