Vue核心技术-4,条件渲染指令

###一,前言

这两天会出一份目录,对之前的几篇也会重新编排,
并补充一些遗漏的知识点,例如插值部分的过滤器等等...
在没有目录的情况下,暂时先按照自己的想法把知识点更新上来

这一篇介绍Vue的条件渲染指令,包括v-if,v-else-if,v-else,v-show
这些指令虽然都是根据条件对页面进行显示的指令,但功能和使用上还是很值得考究的

---

###二,v-if,v-else-if,v-else指令的简单介绍

和js语法中的条件语句if...else if...else类似,将这三个指令列为一组
Vue.js的条件指令也可以根据表达式的值,完成DOM中元素/组件的渲染和销毁

<div id="app">
  <p v-if="status === 1">当status等于1时显示此行</p>
  <p v-else-if="status === 2">当status等于2时显示此行</p>
  <p v-else>当status既不等于1也不等于2时显示此行</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      status: 1
    }
  })
</script>

上面这个简单的例子,会根据status的值动态渲染页面完成显示

status=1:

此时DOM:

通过dev-tools工具将status改为2:

此时DOM:

从图中可以看到页面会随status值变化而同步变化,
且只显示status值对应的dom,其他dom并没有被渲染
当status由1变为2时,status=1的dom被销毁,status=2的dom被创建

---

###三,v-show指令的简单介绍

v-show的用法和v-if相同,功能上很相似,也是控制元素的显示和隐藏
但两者对于显示隐藏式的实现方式不同,
v-show是通过改变元素CSS属性display实现显隐效果的

<div id="app">
  <p v-show="status === 1">当status等于1时显示此行</p>
</div>

<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data: {
      status: 1
    }
  })
</script>

当status=1时,元素显示:

此时DOM:

使用devtools将status值修改为2,元素隐藏

此时DOM:

我们发现当v-show表达式为false时,元素隐藏,
与v-if不同的是,这个元素依然还存在于dom中,
只是被添加了style="display: none;"实现隐藏效果

注意:

在使用上和js相似,v-else-if需要紧跟v-if,v-else要紧跟v-else-if或v-if
当表达式为真时,相应的元素/组件及所有节点将被渲染,为假时将被移除
v-show不支持语法,也不支持v-else

---

###四,一次判断多个元素的显示隐藏

上面介绍了v-if和v-show的简单使用和区别
但上边的例子都是对的那个元素进行显示隐藏控制

在真实项目中,往往需要一次判断控制多个元素的显示隐藏
我们可以在多个元素上添加相同的判断条件,但这样会造成代码的冗余
我们也可以在外层套一个div做v-if或v-show的显隐判断,
但这会导致渲染结果多出一个div,而这个div往往并不是我们想要的

这时,我们可以在Vue内置的