Vue.JS入門教學之列表渲染
你可以使用 v-repeat 指令來基於 ViewModel 上的物件陣列渲染列表。對於數組中的每個對象，該指令將建立一個以該對像作為其 $data 對象的子 Vue 實例。這些子實例繼承父實例的資料作用域，因此在重複的範本元素中你既可以存取子實例的屬性，也可以存取父實例的屬性。此外,你也可以透過 $index 屬性來取得目前實例對應的陣列索引。
<ul id="demo">
<li v-repeat="items" class="item-{{$index}}">
{{$index}} - {{parentMsg}} {{childMsg}}
</li>
</ul>var demo = new Vue({
el: '#demo',
data: {
parentMsg: 'Hello',
items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]
}
})
查看一下效果，應該很容易得到結果
塊級重複
有時我們可能需要重複一個包含多個節點的塊，這時可以用 標籤包裹這個塊。這裡的 標籤只起到語意上的包裹作用，本身不會被渲染出來。例如：
<ul>
<template v-repeat="list">
<li>{{msg}}</li>
<li class="divider"></li>
</template>
</ul>
簡單值陣列
簡單值 (primitive value) 即字串、數字、boolean 等並非物件的值。對於包含簡單值的數組，你可用$value 直接存取值:
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
new Vue({
el: '#tags',
data: {
tags: ['JavaScript', 'MVVM', 'Vue.js']
}
})
使用別名
有時我們可能想要更明確地存取
使用別名
的隱名符號父作用域。你可以透過提供一個參數給v-repeat 指令並用它作為將被迭代項的別名:
<ul id="users">
<li v-repeat="user : users">
{{user.name}} - {{user.email}}
</li>
</ul>var users = new Vue({
el: '#users',
data: {
users: [
{ name: 'Foo Bar', email: 'foo@bar.com' },
{ name: 'John Doh', email: 'john@doh.com' }
]
}
});變異方法
Vue.js包括push(), pop(), shift(), unshift(), splice(), sort() 和reverse()) 進行了攔截，因此呼叫這些方法也將自動觸發視圖更新。// 以下操作会触发 DOM 更新
demo.items.unshift({ childMsg: 'Baz' })
demo.items.pop()<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
<input type="button" value="测试" onclick="myClick();">
<script>
var tag = new Vue({
el: '#tags',
data: {
tags: ['标签一', '标签二', '标签三']
}
});
function myClick(){
tag.tags.pop();
}
</script>
</body>
</html>set () 和$remove() 。
你應該避免直接透過索引來設定資料綁定數組中的元素，例如 demo.items[0] = {}，因為這些改動是無法被 Vue.js 偵測到的。你應該使用擴充的 $set() 方法:
// 不要用 `demo.items[0] = ...`
demo.items.$set(0, { childMsg: 'Changed!'})
// 删除索引为 0 的元素。 demo.items.$remove(0)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script>
</head>
<body>
<ul id="tags">
<li v-repeat="tags">
{{$value}}
</li>
</ul>
<input type="button" value="测试" onclick="myClick();">
<script>
var tag = new Vue({
el: '#tags',
data: {
tags: ['标签一', '标签二', '标签三']
}
});
function myClick(){
//tag.tags.pop();
//tag.tags[0] = '修改后的内容不生效';
tag.tags.$set(0, '修改后的内容生效');
tag.tags.$remove(1);
}
</script>
</body>
</html>
當你使用非變異方法，例如filter(), concat() 或 slice()，傳回的陣列將是一個不同的實例。在此情況下，你可以用新陣列取代舊的陣列:
demo.items = demo.items.filter(function (item) {
return item.childMsg.match(/Hello/)
})
你可能會認為這將導致整個清單的 DOM 被銷毀並重新渲染。但別擔心，Vue.js 能夠辨識一個陣列元素是否已有關聯的 Vue 實例， 並盡可能地進行有效重複使用。
使用track-by（vue中track-by屬性）
在某些情況下，你可能需要以全新的物件（例如 API 呼叫所傳回的物件）去替換陣列。如果你的每一個資料物件都有一個唯一的 id 屬性，那麼你可以使用 track-by 特性參數給 Vue.js 一個提示，這樣它就可以重複使用已有的具有相同 id 的 Vue 實例和 DOM 節點。例如：你的資料是這個樣子的
{
items: [
{ _uid: '88f869d', ... },
{ _uid: '7496c10', ... }
]
}
那麼你可以像這樣給予提示:
<div v-repeat="items" track-by="_uid"> <!-- content --> </div>
_m裡
'88f869d' 的新對象，它就會知道可以直接重複使用有同樣_uid 的已有實例。在使用全新資料重新渲染大型 v-repeat 清單時，合理使用 track-by 能大幅提升效能。
遍歷物件
你也可以使用 v-repeat 遍歷一個物件的所有屬性。每個重複的實例會有一個特殊的屬性 $key。對於簡單值，你也可以像存取數組中的簡單值那樣使用 $value 屬性。<ul id="repeat-object">
<li v-repeat="primitiveValues">{{$key}} : {{$value}}</li>
<li>===</li>
<li v-repeat="objectValues">{{$key}} : {{msg}}</li>
</ul>new Vue({
el: '#repeat-object',
data: {
primitiveValues: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
},
objectValues: {
one: {
msg: 'Hello'
},
two: {
msg: 'Bye'
}
}
}
});
在 ECMAScript 5 中，對於新增一個屬性，或為物件中刪除一個屬性時，沒有機制可以偵測到這兩種情況。針對這個問題，Vue.js 中的被觀察對象會被加入三個擴充方法: $add(key, value), $set(key, value) 和 $delete(key)。這些方法可以用於在新增 / 刪除觀察對象的屬性時觸發對應的視圖更新。方法 $add 和 $set 的不同之處在於當指定的鍵已經在物件中存在時 $add 將提前返回，所以調用 obj.$add(key) 並不會以 undefined 覆蓋已有的值。
迭代值域
v-repeat 也可以接受一個整數。在這種情況下，它將重複顯示一個模板多次。下面的例子將會迭代3次。<div id="range">
<div v-repeat="val">Hi! {{$index}}</div>
</div>new Vue({
el: '#range',
data: {
val: 3
}
});數組過濾器
有時我們只需要顯示一個陣列的過濾或排序的版本，而不需要實際重置或原始資料。 Vue 提供了兩個內建的過濾器來簡化此類需求： filterBy 和 orderBy。 🎜<input v-model="searchText">
<ul>
<li v-repeat="users | filterBy searchText">{{name}}</li>
</ul>以上就是本文的全部內容，希望對大家的學習有幫助
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
深入探討vite是怎麼解析.env檔的
Jan 24, 2023 am 05:30 AM
使用vue框架開發前端專案時，我們部署的時候都會部署多套環境，往往開發、測試以及線上環境呼叫的介面網域都是不一樣的。如何能做到區分呢？那就是使用環境變數和模式。
圖文詳解如何在Vue專案中整合Ace程式碼編輯器
Apr 24, 2023 am 10:52 AM
Ace 是一個用 JavaScript 寫的可嵌入程式碼編輯器。它與 Sublime、Vim 和 TextMate 等原生編輯器的功能和效能相符。它可以很容易地嵌入到任何網頁和 JavaScript 應用程式中。 Ace 被維護為Cloud9 IDE的主要編輯器 ，並且是 Mozilla Skywriter (Bespin) 專案的繼承者。
vue中組件化和模組化有什麼區別
Dec 15, 2022 pm 12:54 PM
組件化和模組化的區別：模組化是從程式碼邏輯的角度進行劃分的；方便程式碼分層開發，確保每個每個功能模組的職能一致。元件化是從UI介面的角度進行規劃；前端的元件化，方便UI元件的重複使用。
探討如何在Vue3中撰寫單元測試
Apr 25, 2023 pm 07:41 PM
在當今前端開發中，Vue.js 已經成為了一個非常流行的框架。隨著 Vue.js 的不斷發展，單元測試變得越來越重要。今天，我們將探討如何在 Vue.js 3 中編寫單元測試，並提供一些最佳實踐和常見的問題及解決方案。
深入聊聊vue3中的reactive()
Jan 06, 2023 pm 09:21 PM
前言：在vue3的開發中，reactive是提供實現響應式資料的方法。日常開發這個是使用頻率很高的api。這篇文章筆者就來探索其內部運作機制。
Vue中JSX語法和模板語法的簡單比較（優劣勢分析）
Mar 23, 2023 pm 07:53 PM
在Vue.js中，開發人員可以使用兩種不同的語法來建立使用者介面：JSX語法和範本語法。這兩種文法各有優劣，以下就來探討它們的差異和優劣勢。
怎麼查詢目前vue的版本
Dec 19, 2022 pm 04:55 PM
查詢目前vue版本的兩種方法：1、在cmd控制台內，執行「npm list vue」指令查詢版本，輸出結果就是vue的版本號資訊；2、在專案中找到並開啟package.json文件，查找「dependencies」項目即可看到vue的版本資訊。
