vue 自學筆記 5 列表渲染

2022-03-11 14:31:33 字數 1187 閱讀 8630

列表渲染

一:v-for 指令

當我們涉及到列表渲染資料的時候,不可能做乙個重複的工作去不停的乙個乙個的渲染每一項列表。並且列表資料的表現,比如從後端請求過來的資料,不可能是乙個乙個的單獨的 json 資料,通常會是乙個陣列或者物件。

針對這樣的情景,vue 提供了v-for指令使列表使我們可以根據一組陣列的選項列表進行渲染。並且,我們只需要寫乙個列表元素作為模板就可以通過遍歷屬性的方式渲染出大量的列表內容。

當然,除了列表,也可以通過v-for重複渲染其他元素,這裡我們使用v-for重複渲染 div,v-for="(item, index) of list"是乙個固定的語法,引數第一項為遍歷 list 屬性的每一項,引數第二項為遍歷 list 時的索引。

除了item of items這種寫法,使用item in items也是可以的。(items 是源資料陣列並且 item 是陣列元素迭代的別名)。

注意:!!

二:對vue 陣列資料的修改

現在頁面有 5 個資料,我們在控制台 vm.list[5] = '123',新增一條資料,發現 vm.list 雖然多了一條資料,但頁面沒有響應式的變化

Vue8 列表渲染

v for把乙個陣列對應為一組元素h2 我們可以用 v for 指令基於乙個陣列來渲染乙個列表。v for 指令需要使用 item in items 形式的特殊語法,其中 items 是源資料陣列,而 item 則是被迭代的陣列元素的別名。在v for中也可以使用of替代in作為分隔符,因為它更接近...

html自學筆記五 列表

前言 這一節學習列表內容,列表分為無序列表和有序列表 無序列表 有序列表 列表項1li 列表項1li 列表項1li 列表項1li 列表項1li 列表項1li ul type circle 列表項1li 列表項1li 列表項1li 列表項1li 列表項1li 列表項1li ul type square...

Python自學筆記 11 列表推導

用到函式的乙個常見操作是將其用於乙個列表的所有項,並使用結果來建立乙個新的列表。如果我們要生成list 1,2,3,4,5,6,7,8,9,10 能用哪種方法呢?當然最基礎的方法可以參見列表 上 但是,這種只適合項比較少的一些場景,現在我們要生成1到999的列表怎麼辦呢?list range 1,1...