3. vue系列v-if、v-show指令
发布网友
发布时间：2024-09-26 17:36
共1个回答
热心网友
时间：2024-12-04 02:22
在index.html文件中，我们将添加两个新p标签。
index.html
打开网页后，我们会看到两个p标签都被显示出来了。这显然不符合我们的预期。我们只希望根据产品是否有库存来显示其中一个。因此，我们将进入Vue app的数据对象，并添加一个布尔型变量inSmile，用于确认是否显示商品。
main.js
现在，我们已经添加了要有条件地呈现的元素。接下来，我们将学习v-if指令。
我们可以将v-if指令添加到元素上，以根据条件呈现它。例如：
现在，此元素只有在inSmile为true的情况下才会呈现。
我们可以将v-if指令与v-else指令组合在一起，就变成了传统的if-else条件分支。当inSmile为false时，就显示v-else分支的p标签。
index.html
现在，我们的代码就变成了这样。
此时，因为在main.js中我们把inSmile设置成了true，所以打开网页可以看到else分支的p标签不见了。通过控制台也能看出，是通过删除的方式去掉了内容为“微笑没货了”的p标签。
当我们把main.js中的inSmile设置成了false，就变成了：
值得注意的是，您并不总是需要v-if与v-else配对。当然，在很多用例中，你只是需要一个标签的显示或隐藏。在这些情况下，有时使用v-show指令是更好的选择。
index.html
完整代码：
值得注意的是：
v-show指令用于切换元素的可见性，是通过设置style的方式决定呈现与否，而不是像v-if在DOM中完全添加和删除元素。也就是说，v-if会把整个标签在html中删除了。
所以打开网页，我们在页面上依然看不到新增的内容为“微笑的库存有很多v-show”的p标签。但是，打开控制台可以看到，这段代码只是设置成了不显示。
我们写一下完整的产品库存示例：
main.js
我们把inSmile改成整型，因此我们可以在表达式中使用更复杂的逻辑。
现在，我们先把之前的示例改一下代码。
index.html
接下来需要考虑的是，在小于10件大于0件之间的条件通过什么指令加进去。别担心，我们还有一个v-else-if指令。
我们把这一条指令加进代码里。
index.html
完整代码：
main.js
网页展示：
由此可以看出，该指令为我们提供了一个中间的逻辑层。也就是下面这个示例中传统的if-else嵌套形式。
