Vue.js这货，它是个挺火爆的前端框架，提供很多表现各种条件下隐藏或露出网页部分的功能指令！比较常见的几个包括v-if、v-show、v-else、v-else-if等，这几兄弟都各有各的作用。只要会用他们，就能实现页面显示行为的微调，让用户体验更棒！
v-if和v-else基本用法
你知道Vue中的v-if指令吗？这个东西能让我们根据条件来控制哪些元素显示或隐藏。只要条件真，那元素就出现啦；反之，它就藏起来咯。这么一来，对我们开发者来说，管理页面内容变得轻松好多！
简单来说，v-else能跟v-if搭档，在一个标签里说明完全相反的情况。这就让我们更容易看出”除非前者达不到要求，那就是后者”这个意思了。
做开发，总是碰到要按情况换内容的时候！比如说，逛某个电商网，突然发现同一页的欢迎信息跟着你有没有登录而变了样：如果你已经登好了，那就告诉你”欢迎您，用户名”；要是没登陆的话，它就会提醒”别忘了先登录哦”。
v-show指令的特点
同样是让元素显示和隐藏的，不过v-show跟v-if有点不一样。用v-show的话，就是用css的display属性操作的，不会真的把元素从dom里删掉。
Hello, World!
Sorry, the element is hidden.
就是说，使用v-show的时候，那个元素还是老老实实在DOM里，只不过是由CSS来决定它要不要出现在屏幕上。不同的地方在于，用了v-if的话，如果条件不满足的话，这个元素就直接从DOM里面消失！
其实，当你经常需要改变某个元素的状态，尤其是它占地面积大或者涉及到复杂运算的话，用v-show要比v-if速度快多了！原因在于它不用每回都忙着添加删除DOM元素咯。
v-else-if的灵活运用
有时候咱们得设定好几个连续的条件判断，这时候就用上了v-else-if 这个神奇指令~
比如说，咱们有张问卷调研的网页，里面会根据你选的选项显示不同的题目哦：要是选了A，就给你看问题1；选了B的话，就是问题2了；而选C，那么就是看到问题3。
我们只要灵活用好v-if、v-else、v-else-if 这几个指令就行，这样遇到复杂页面逻辑也不怕。同时，代码看起来更清晰明了，易于理解！
动态数据驱动条件渲染
Hello, World!
Title
你知道吗？我们经常用Vue来把数据和模板绑定起来，这样网页就能随着数据变而变了！再加上一点点条件渲染指令，我们就能让网页变得超级炫酷！
比方说，比如说论坛里的用户，他们能干啥？手里有权力的管理员就能删帖看“删除帖子”这个按钮了；普通用户，就只有看别人评论和自己评论“发表评论”这两个按钮！
这个通过数据动态驱动的渲染方式可以让页面变得很有趣，个性化，用起来也舒服多了。这样一来，咱们用户的体验就提高了，页面功能也跟着变强！
列表循环中的条件渲染
遇到在列表上显示各种信息的任务，有时候要看每个项目的具体状况来决定怎么办。这就得把条件渲染和列表循环整在一起用了！
Vue有个牛逼的指令叫v-for，就是帮你把数组和对象给翻一遍，再加上条件渲染，就能自由掌控列表每一项展示啥
好比说，商品列表页上的东西，如果卖完了就变成灰字，还不让买；没卖完的话，价格和购买按钮就能随便看。
优化后的这个设计让每一个列表项都特别显眼，你能看到的状态和信息都很全面，整个页面看起来更易懂也更实用！
异步数据加载下的条件渲染
Hello, World!
Sorry, the element is hidden.
看项目的时候，总有需求要等数据加载完才能知道怎么展示。这就尴尬了，因为不知道显示什么。
碰到这个问题，Vue里咱们就用计算属性和条件渲染指令这俩家伙儿，就能搞定咱们遇到的页面展示问题了，尤其是还有块状的异步数据加载的时候！
比如，新闻客户端用起来简单得很，没等新闻全跑出来就显示个”加载中”的小窗口；等新闻全加载好了，就能看你关心的那类新闻了。
我们巧妙地借助计算属性来监测进度，再配合条件渲染指令让界面即时更新；这样即使你在等候的期间，也可以享受到贴心的提醒和流畅的互动哦～
事件触发下的动态渲染
除了要用数据驱动程序之外，交互式应用里还有个好方法就是看用户怎么玩，然后根据他们的操作来“动笔”（表示动态渲染）。Vue这个框架能给我们提供很多好用的工具和命令，让我们在有动作发生时就能顺手完成动态效果的渲染。
比如，你在答完一道题，按个’继续答题’就直接跳转到下一题了嘛；再说你点下那个’交卷’，就能看到答案解析，这些都是用事件触发和条件渲染做的~
通过监听事件并即时做些事情让我们的界面变得更吸引人，比如调整显示信息，这样用起来就更有趣了~
评论0