【vue.js开发】基础篇：v-if指令和v-show指令

在vue.js开发中，v-if指令和v-show指令都是通过条件来渲染元素内容，它们的用法如下：

v-if指令

<div id="app">
    <p v-if="canSee1">Hello Vue1</p>
	<p v-if="canSee2">Hello Vue2</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    canSee1: true,
	canSee2: false
  }
})
</script>

渲染如下：

由此可以看出，只有在v-if指令的表达式返回true的时候，对应的内容才会渲染出来。如果我们希望用v-if来控制多个元素的渲染，可以直接在外层的元素上加上v-if指令：

<div id="app">
	<div v-if="canSee">
		<p>div:you can see me!</p>
		<p>div:you can see me!</p>
	</div>
	<template v-if="canSee">
		<p>template:you can see me!</p>
		<p>template:you can see me!</p>
	</template>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
	canSee: true
  }
})
</script>

渲染如下：


事实证明，把v-if放在外层的元素上的确可以同时控制几个元素的渲染，但是通过例子可以发现，我故意用<div>和<template>两个不同的元素作为外层元素，结果可以发现，在<template>元素上使用v-if，<template>元素会被当成一个不可见的元素，不会渲染出来，而普通的<div>元素则直接渲染了出来，在实际开发中，需要了解这两种情况的区别。

类似js里面的if else条件语句，vue.js也可以用v-else指令来表示v-if指令的else逻辑，在vue2.1.0版本还新增了v-else-if指令来表示else if的逻辑，用法如下，最终渲染出来的只有第二行：

<div id="app">
	<p v-if="canSee1">p1:you can see me!</p>
	<p v-else-if="canSee2">p2:you can see me!</p>
	<p v-else>p3:you can see me!</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
	canSee1: false,
	canSee2: true,
	canSee3: true
  }
})
</script>

值得注意的是，v-else-if必须跟在带v-if的元素的后面才会被识别，同理，v-else也必须跟在带v-if或者v-else-if的元素后面才会被识别。

v-show指令

<div id="app">
	<p v-show="canSee1">p1:you can see me!</p>
	<p v-show="canSee2">p1:you can see me!</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
	canSee1: true,
	canSee2: false
  }
})
</script>

v-show指令的用法如上所示，跟v-if指令的用法差不多，都是只有指令的表达式返回true的时候才显示出来。

v-if和v-show的区别

<div id="app">
	<div>
	  <p>v-if:</p>
	  <p v-if="canSee1">v-if:you can see me!</p>
	  <p v-if="canSee2">v-if:you can see me!</p>
	</div>
	<div>
	  <p>v-show:</p>
	  <p v-show="canSee1">v-show:you can see me!</p>
	  <p v-show="canSee2">v-show:you can see me!</p>
	</div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
	canSee1: true,
	canSee2: false
  }
})
</script>

渲染如下：


对比v-if和v-show渲染的结果来看：
v-if是惰性的，如果v-if的表达式结果不是true的话，对应的元素是不会被渲染出来的，一直到表达式的结果第一次为true的时候，才会去渲染。
v-show不管表达式的结果如何，都会渲染出来，表达式的结果只是用来判断是否通过css来切换元素的隐藏和显示。

总结

v-if切换的成本较高，每次切换v-if都会销毁或者重新渲染元素，但是初始化的成本较低，因为如果表达式为false，初始化就不会渲染；
v-show的初始化成本较高，因为不管表达式的结果如何，初始化都会把元素渲染出来，但是切换成本较低，因为v-show的切换仅仅是通过css控制display来隐藏和显示。
因此，在实际开发中，如果需要经常切换的元素，最好用v-show指令，相反地，如果不需要频繁切换，并且初始化也不需要马上显示的元素，可以考虑用v-if来优化性能。