Vue条件渲染：v-if vs v-show，让你的网站动起来

Vue中条件渲染的基本概念

在Vue里，条件渲染就是用特定条件来搞定网页上元素出现或消失的事儿，就能做出炫酷的动态UI。用这个功能的话，数据变了就能灵活地展示不同的信息，让你的网站用户体验更好。Vue给咱们提供了两种简单明了的方法来做这个，那就是v-if和v-show指令。虽然它们用法不太一样，但都能帮你随心所欲地进行条件展示。

v-if指令的应用

V-if这个命令在vue里很实用，可以通过判断表达式真假的方式决定元素要不要展示在网页上。只要表达式为真（true），元素就会出现；反之，它就消失！这样就能方便地让页面元素显示或隐藏起来。

html

欢迎您，用户A！
请先登录后查看内容。

这段代码说了啥？就是告诉你，只要登录成功，就能看到不同的内容！怎么做到的？就是通过判断isLogin这个变量是真是假来决定的，这就叫”条件渲染”~

按钮

v-show指令的灵活运用

你知道吗？Vue还有个简单好用的v-show指令！它和v-if指令差不多，都是根据条件来渲染东西，不过v-show不是真的把东西给藏起来或者删掉，而是通过改变CSS属性display让它们显示或隐藏罢了。这样一来，如果你需要频繁地切换东西的显示状态，v-show就比v-if方便多了，因为它不用搞那么多烦人的DOM操作~

用v-show指令超简单的！在HTML模板里添加上v-show指令，然后把它和对应的变量关联起来就行了。比如说，看看这个商品列表页面上，当商品卖完了，就显示”已售罄”；没卖完的话，就是正常的那个。

{{ product.name }}

<span v-show=”product.stock ===0″>该商品已售罄</span>

这里有个小窍门，就是我们可以利用v-show这个神奇的指令来动态显示当前商品的销售情况。这样，用户就能清楚看到哪些商品已经卖光，哪些还有货！

v-if与v-show的选择与性能影响

按钮

咱们在弄点啥程序的时候，得看情况来选那种扣条件照着画出来的方法，这样才能让电脑跑起来快，大家用着又舒心！那一般的，要是你总是变幻着状态显示或者要速度快一点的话，就用v-show 这个命令吧；但是如果那个页是不动弹的，或者需要动很多 DOM 的东西，那就选v-if 这个命令。

因为v-if会直接处理DOM的变化，所以频繁切换的话就有点费劲了。相比之下，v-show只是通过改变CSS属性来展示或隐藏内容，速度就要快很多。所以，我们在项目中选哪种渲染方法，得看你页面需要啥样儿的效果，还得顾着性能好不好。

var app = new Vue({
  el: '#app',
  data: {
    isShow: true  // 是否显示按钮
  }
});

结语与思考

看了这篇文章，你应该也学会怎么用Vue的v-if和v-show指令做出炫酷的动态页面了！合理运用这些指令，能让你的网页互动性更强，更加与众不同，绝对会让用户喜欢得不要不要的。

最后，咱们来聊聊你们最近做项目时用上条件渲染了没？那么怎样才能找到合适的办法去搞定？真心期待大家能分享下在Vue项目开发过程中的那些糗事，也说说你们成功解决问题以后的经验体会！