Vue.js前端秘籍：v-if、v-show两大神器，让UI亮瞎你的眼

Vue.js这个前端JavaScript框架真牛，啥子UI都可以玩弄在手掌心。想学习前端，咱就得懂点儿门道，比如那个大家都爱的”条件渲染”。诀窍就是利用v-if、v-show、v-else和v-else-if这些魔法短语。别着急，接下来就让我手把手教给你咋使。小白们，跟着我动起来一起进步！

一、v-if指令

你知道哇？在Vue里面，弄个v-if就能控制要不要显不显某样东东了，就像一把无情的开关，用expr（表达式）来决定。要是 bool 是 true，那它就跑出来；反之就藏起来！接下来我就要教你怎么用好这个v-if。

在模板中，我们可以使用v-if指令来进行条件判断。例如：

html
    这是一个使用v-if指令的元素

快瞧瞧这段代码！只要有个”isShow”开关是真的，咱们的东西就能正常显露咯～

  

    
这是一个v-if指令的示例
  


export default {
  data() {
    return {
      isShow: true
    }
  }
}

二、v-show指令

V- show跟v- if挺相似，不过还是有些地方不太一样。举个例子给你看看，你就能明白，即使是用了v-show后，HTML还是能看得到的，只不过有点儿捉迷藏似的。

这是一个使用v-show指令的元素

只要isShow为真，就可以秒变成炫酷的CSS样式动画

三、v-else指仁

想在前面那个v-if 或者v-else-if 后面加个“其他”情况的话，别忘了v-else 这个玩意儿。这个小工具挺好用的，直接插上去就行了！Let’s check out this small example:

  

    
这是一个v-show指令的示例
  


export default {
  data() {
    return {
      isShow: true
    }
  }
}

显示内容

隐藏内容

只要isShow是假的，那就得给大家看看”秘密！”

四、v-else-if指仁

你未必晓得？咱们实现多个条件判断时，不仅能用上v-else，还能试试v-else-if！这个很实用，检验一种情况，就能决定要不要露或者藏起一部分信息。给你打个比方说更明白点儿：

这是一个信息提示

这是一个警告提示

  

    
这是一个v-if指令的示例
    
这是一个v-else指令的示例
  


export default {
  data() {
    return {
      isShow: false
    }
  }
}

咱们这个小玩意儿就是瞅瞅”type”那小子是啥值，然后看情况给点儿提示。

五、灵活运用条件渲染：

你想怎么弄这个指令随你自己啥情况都能应对！比如说，用v-else 和v-else-if这类神组合，就能搞定各种让人头疼的条件判断。

六、动态改变条件：

做项目老得看用户行为调效果？就跟变魔术似得。但是有了Vue，这事儿就变得简单多了！界面能跟着数据随时变，简直跟打游戏一样溜。

七、注意事项：

用渲染指令时要小心，不要弄得太复杂，否则整个程序就乱七八糟。怎么处理？一个简单有用的办法是，把代码写整齐些，这样简洁易懂，也方便以后的维修保养！

  

    
这是一个信息提示
    
这是一个警告提示
    
这是一个错误提示
    
这是一个未知提示
  


export default {
  data() {
    return {
      type: 'warning'
    }
  }
}

八、总结：

想进阶成前端大师？学懂vue中的条件渲染就行了！认真看下这个文章，哪怕新手也能明白，轻松掌握这些小窍门。赶紧实践起来，把它们用到实际项目去。

来这儿，我教你们学点Vue的技巧，那就是要学会利用v-if、v-show、v-else还有v-else-if这些条件渲染技术！希望大家都能把它们弄熟，用到实际项目里头就好了。