VueJS - 渲染

你好啊，未來的Vue.js超級明星！我很興奮能成為您在Vue.js渲染世界中的導師。作為一個教了多年編程的人，我可以向您保證，掌握渲染就像學習繪畫一樣——這是我們讓數字畫布栩栩如生的方法！那麼，我們捋起袖子，一起來看看吧！

條件渲染

想像一下你是一名魔術師，你想通過手腕的一甩，讓你的網頁上的事物出現或消失。這就是Vue.js中的條件渲染所允許你做到的！這就是基於某些條件來顯示或隱藏元素。

v-if 指令

v-if 指令是我們口袋里的第一個技巧。這就像俱樂部的保鏢，決定誰能進去，誰不能。

<div id="app">
<h1 v-if="isVisible">現在你看見我了！</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

在這個例子中，只有當 isVisible 為 true 時，<h1> 標籤才會出現。如果它是 false，嗖！元素會從DOM中完全消失。它不只是被隱藏——它是消失了，就像從未存在過一樣！

v-else 和 v-else-if 指令

現在，讓我們用 v-else 和 v-else-if 來為我們的表演增加一些魔術：

<div id="app">
<div v-if="temperature < 0">天氣凍結！</div>
<div v-else-if="temperature < 20">天氣涼爽。</div>
<div v-else>天氣溫暖！</div>
</div>

<script>
new Vue({
el: '#app',
data: {
temperature: 25
}
})
</script>

在這裡，我們創建了一個小氣象報告。根據 temperature 的值，會出現不同的信息。這就像舞台上有多個陷阱門——一次只能打開一個！

v-show 指令

有時候，我們想要更加狡猾一點。這時 v-show 就派上用場了：

<div id="app">
<h1 v-show="isVisible">我總是在這裡，只是有時候看不到罷了！</h1>
</div>

<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>

與 v-if 不同，v-show 並不會從DOM中移除元素。它只是使用CSS來隱藏它。把它想像成在你的元素上投擲一個隱形斗篷，而不是讓它完全消失。

列表渲染

現在我們已經掌握了讓事物出現和消失的技巧，讓我們學習如何從單個模板創建多個元素。這就是列表渲染派上用場的地方！

v-for 指令

v-for 指令就像一台神奇的複印機。它取一個模板，並為數組或對象中的每個項目複製它。

<div id="app">
<ul>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: ['蘋果', '香蕉', '櫻桃', '棗']
}
})
</script>

在這個例子中，我們正在創建一個水果購物列表。v-for 指令遍歷我們的 fruits 數組中的每個水果，並為它創建一個新的 <li> 元素。這就像有一群小精靈，每個都在紙上寫下水果的名字！

使用 v-for 與對象

v-for 不僅對數組有效——它也對對象有效！

<div id="app">
<ul>
<li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
person: {
name: '愛麗絲',
age: 28,
job: '開發者'
}
}
})
</script>

在這裡，我們正在顯示一個人的信息。v-for 指令遍歷 person 對象的每個屬性，為每個鍵值對創建一個新的 <li>。

v-for 與範圍

想要創建特定數量的元素？v-for 也可以做到！

<div id="app">
<span v-for="n in 5">{{ n }} </span>
</div>

這將顯示數字1到5。就像讓Vue為你數數一樣！

Key 屬性

使用 v-for 時，給每個渲染的元素一個唯一的 key 是很重要的。這樣幫助Vue跟踪哪些項目已經改變、被添加或被移除。

<div id="app">
<ul>
<li v-for="fruit in fruits" :key="fruit.id">
{{ fruit.name }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
fruits: [
{ id: 1, name: '蘋果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '櫻桃' }
]
}
})
</script>

把 key 想像成每個元素的姓名標籤。它幫助Vue在列表變化時辨認出每個元素。

方法表格

這裡是一個我們學過的方法的便捷表格：

指令	用途	示例
v-if	條件渲染元素	<div v-if="isVisible">你好</div>
v-else	當 v-if 為假時提供替代	<div v-else>再見</div>
v-else-if	提供額外的條件	<div v-else-if="isSpecial">特殊</div>
v-show	切換元素的可见性	<div v-show="isVisible">總是在DOM中</div>
v-for	渲染列表中的項目	<li v-for="item in items">{{ item }}</li>

恭喜你，我的熱情學生們！我們已經涵蓋了Vue.js渲染的基本知識。記住，熟練是通過練習得來的，所以不要害怕嘗試這些概念。很快，你將能夠像專業人士一樣渲染Vue.js組件，創建有動態和交互性的網頁，讓你的用戶驚嘆。持續編程，持續學習，最重要的是，樂在其中！

Credits: Image by storyset