vue.js循环for(列表渲染)详解

一、总结

一句话总结：

v-for

{{ item.message }}

var example1 = new Vue({

el: '#example-1',

data: {

items: [

{ message: 'Foo' },

{ message: 'Bar' }

]

}

})

1、vue.js中的循环结构(列表渲染:for)如何使用？

v-for

用于循环的数组里面的值可以是对象，也可以是普通元素

v-for

可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名：

示例：

{{ item.message }}

var example1 = new Vue({

el: '#example-1',

data: {

items: [

{ message: 'Foo' },

{ message: 'Bar' }

]

}

})

结果：

{% raw %}

{{item.message}}

{% endraw %}

详细示例：

1

2

3

4

5

v-for

6

7

8

9 window.οnlοad= function() {10 vardataList={11 innerText: ['大家好','欢迎来到麦子学院！']12 };13 newVue({14 el:'div',15 data: dataList16 });17 };18

19

20

21

22 {{ text }}

23