VueJS - 渲染

你好啊，未来的Vue.js超级巨星！我很高兴能成为你探索Vue.js渲染世界的向导。作为一名有多年教学经验的编程老师，我可以向你保证，掌握渲染就像学习绘画一样——它是我们让数字画布生动起来的魔法！那么，让我们卷起袖子，开始吧！

条件渲染

想象一下，你是一名魔术师，想要通过手腕的一挥，让网页上的东西出现或消失。Vue.js中的条件渲染本质上就是让你做到这一点！它关乎于根据特定条件显示或隐藏元素。

v-if 指令

v-if 指令是我们的第一个技巧。它就像夜店的保安，决定谁可以进去，谁不可以。

<div id="app">
<h1 v-if="isVisible">Now you see me!</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">It's freezing!</div>
<div v-else-if="temperature < 20">It's cool.</div>
<div v-else>It's warm!</div>
</div>

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

在这里，我们创建了一个小型的天气预报。根据 temperature 值的不同，会显示不同的信息。这就像舞台上有多个陷阱门——一次只能打开一个！

v-show 指令

有时，我们想要更隐蔽一些。这时，v-show 就派上用场了：

<div id="app">
<h1 v-show="isVisible">I'm always here, just sometimes invisible!</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: ['Apple', 'Banana', 'Cherry', 'Date']
}
})
</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: 'Alice',
age: 28,
job: 'Developer'
}
}
})
</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: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]
}
})
</script>

把 key 想象成每个元素的胸牌。它帮助Vue在列表变化时识别谁是谁。

方法表格

以下是我们在本课程中学到的方法的总结：

指令	目的	示例
v-if	根据条件有条件地渲染元素	<div v-if="isVisible">Hello</div>
v-else	当 v-if 为假时提供替代内容	<div v-else>Goodbye</div>
v-else-if	提供附加条件	<div v-else-if="isSpecial">Special</div>
v-show	切换元素的可视性	<div v-show="isVisible">Always in DOM</div>
v-for	渲染一系列项目	<li v-for="item in items">{{ item }}</li>

就这样，我热情的学生们！我们已经涵盖了Vue.js渲染的基础。记住，熟能生巧，所以不要害怕尝试这些概念。很快，你将能够像专业人士一样渲染Vue.js组件，创建出令人赞叹的动态和交互式网页。继续编码，继续学习，最重要的是，继续享受乐趣！

Credits: Image by storyset