在第三课中，我们将讨论条件渲染。仅在满足某些条件的情况下如何在页面上显示内容。
→ Vue.js初学者课程1：实例Vue
→ Vue.js初学者，课程2：绑定属性
→ Vue.js初学者课程3：条件渲染
→ Vue.js初学者课程4：列表渲染
→ Vue .js初学者课程5：事件处理
→ Vue.js初学者课程6：绑定类和样式
→ Vue.js初学者课程7：计算的属性
→ Vue.js初学者课程8：组件
本课目的
我们需要在产品卡中添加题字，以告知访问者该产品是否有库存。如果产品有现货，则应显示题字
In Stock。如果没有存货-题词Out of Stock。显示特定铭文的决定应基于应用程序中存储的数据。
初始码
这是我们将开始使用的代码。像往常一样，它在文件
index.html的标记中<body>：
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
</div>
</div>
</div>
在文件中
main.js，设置Vue实例时，将使用以下数据对象：
data: {
product: "Socks",
image: "./assets/vmSocks-green.jpg",
inStock: true
}
注意，
data新属性已添加到对象。这是一个inStock具有布尔值的属性true。
任务
开发Web应用程序时，通常必须根据特定条件的满足将元素显示在页面上。例如，如果某物品的库存结束了，则需要在该物品卡中告知该物品。
计划将相应的消息作为元素发布
<p>。这意味着其中某处index.html将包含以下元素：
<p>In Stock</p>
<p>Out of Stock</p>
我们的任务是在库存有货的情况下撤出其中一个，而在库存无货的情况下撤走另一个。
问题的解决
在Vue中，解决此问题的方法看起来很简单明了。
如您所知
main.js，在对象中的中描述了指示库存中是否存在商品的数据data：
inStock: true
为了告诉系统
<p>要渲染哪个元素，我们可以使用v-if和指令v-else。这意味着index.html以下内容将落入：
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
如果
inStock包含真值，则打印第一项<p>。否则，将显示第二项。在我们的例子中inStock，该值已写入true，因此将显示它In Stock。
我们有库存，
太棒了！我们只是使用条件渲染来显示产品详细信息。我们已经解决了这个问题。但是，我们不要止步于此，继续进行条件渲染的探索。
V-else-if指令
我们基于准则条件呈现机制
v-if，并v-else可以通过添加逻辑的另一个层面进行扩展。这可以使用指令来完成v-else-if。为了证明这一点，让我们将示例复杂一些。
假设对象
data，在main.js具有的商品数量信息。它们存储在属性中inventory：
inventory: 100
通过使用引号引起来的JavaScript表达式分析此属性，我们可以向页面访问者提供更准确的产品信息：
<p v-if="inventory > 10">In stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
<p v-else>Out of stock</p>
在这种情况下，第一个元素将显示在页面上
<p>，因为相应的表达式原来是true。
V-show指令
如果页面的某个元素需要经常隐藏和显示，则意味着要实现此机制，有必要查看一下伪指令
v-show。带有此类指令的元素将始终存在于DOM中，但是只有在传递给该指令的条件为true时，该元素才可见。实际上，我们正在谈论的事实是，由于使用了此伪指令，因此可以通过condition将CSS属性应用于元素display: none。与
使用
v-if和管理项目相比，此方法提供更好的性能v-else。
该指令的应用如下所示：
<p v-show="inStock">In Stock</p>
v-if使用
伪指令和的解决方案非常v-else适合我们。因此，我们将专注于它，不会改变任何东西。
作坊
向数据对象添加属性
onSale。它应用于控制<span>显示文本On Sale并告知访问者有关销售的元素的呈现。
这是可用于解决此问题的模板。
这是解决问题的方法。
结果
今天，您了解了使用Vue进行条件渲染的知识。即，关于以下内容：
- Vue指令允许您有条件地渲染元素：
- -
- v-else-if
- v-else
- 电视节目
- 使用指令时，可以使用用引号传递给它们的JavaScript表达式。
- 如果传递给指令的引号中的表达式为true，则输出该项目。
- 该指令
v-show仅影响元素的可见性，它不会将元素插入DOM中，也不会从DOM中删除元素。
您是否对开始接触Vue有任何问题，已经计划在此框架的帮助下解决？
→ Vue.js初学者课程1：实例Vue
→ Vue.js初学者，课程2：绑定属性
→ Vue.js初学者课程3：条件渲染
→ Vue.js初学者课程4：列表渲染
→ Vue .js初学者课程5：事件处理
→ Vue.js初学者课程6：绑定类和样式
→ Vue.js初学者课程7：计算的属性
→ Vue.js初学者课程8：组件
