Vue.js 2.0 条件渲染

目录：

v-if

v-show

v-if VS v-show

--------------------------------

v-if 条件渲染：

demo:

<div id="container">
      <h3>1、使用 v-if 来切换按钮上的文字和 div 的显示样式</h3>
      <button v-on:click="cheangeDiv()" style="width:100px;">{{theWord}}</button>
      <!--  如果 flag 为 true 的话那么就显示 div -->
      <div v-if="flag" >
        <div id="showDiv">
            我显示出来了
        </div>
      </div>
      <!-- 否则显示圆形的 div -->
      <div v-else>
        <div id="showBuleDiv"><span style="color:white">圆形</span></div>
      </div>
   <hr>

v-else

可以用 v-else 指令给 v-if 或 v-show 添加一个 “else” 块：

<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

v-else 元素必须紧跟在 v-if 或 v-show 元素的后面——否则它不能被识别。

template v-if

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个 <template> 元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。

<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>

v-show

另一个根据条件展示元素的选项是 v-show 指令。用法大体上一样：

<h1 v-show="ok">Hello!</h1>

不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display 。

常见demo:

<div id="container">
  <button @click="clickMe()">{{defaultButton}}</button>
  <!-- 如果 v-show = true 的话就会显示 此 div  -->
  <div v-show="flag" id="showDiv">
    <span>我是 v-show</span>
  </div>
  <button @click="change()">改变文本的值</button>
  <input type="text" v-model="itext" class="myinput"> <br/>
  你输入的值是：<font class="myfont">{{itext}}</font>
</div>

v-if vs. v-show

<script>
  var vm = new Vue({
    el:'#container',
    data:{
      // 是否显示 div 的标志，默认是不显示
      flag:false,
      // 默认按钮显示字样
      defaultButton:'显示',
      itext: ''
    },
    methods:{
      // 按钮点击的方法
      clickMe(){
        if(this.defaultButton == "显示"){
          this.defaultButton ="隐藏"
        }else{
          this.defaultButton ="显示"
        }
        this.flag = !this.flag
      },
      change() {
        this.itext = "TigerChain"
      }
    }
  })
</script>

1.

v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

2.

相比之下， v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说， v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

参考博文：https://www.w3cschool.cn/vuejs2/conditional.html