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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue.js根据数据循环生成表格_vue.js循环for（列表渲染）详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。