Vue笔记——8.列表渲染

小妍Vue笔记——目录

Vue笔记——1.基本语法指令

Vue笔记——2.搭建脚手架并快速创建Vue项目

Vue笔记——3.实例

Vue笔记——4.模板语法

Vue笔记——5.计算属性

Vue笔记——6.Class 与 Style 绑定

Vue笔记——7.条件渲染

Vue笔记——8.列表渲染

Vue笔记——9.事件处理

Vue笔记——10.表单输入绑定

Vue笔记——11.组件

---

v-for的使用方法

用 v-for 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。如下所示：

1 <ul>
2     <li v-for="fruit in fruits">
3         {
   {
    fruit.name }}
4     </li>
5 </ul>

在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。如下所示：

1 <ul>
2     <li v-for="(fruit, index) in fruits">
3         {
   {
    msg }} - {
   {
    index }} - {
   {
    fruit.name }}
4     </li>
5 </ul>

你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法，如下所示：

1 <ul id="example-3">
2     <li v-for="fruit of fruits">
3         {
   {
    fruit.name }}
4     </li>
5 </ul>

其中fruits是js中定义的一个数组，如下所示：
复制代码

 1 <script type="text/javascript">
 2     var app = new Vue({
   
 3         el: '#app',
 4         data: {
   
 5             msg: 'hello world!!!',
 6             fruits: [
 7                 {
   id:<