Vue 條件渲染

條件渲染

v-if

<h1 v-if="ok">Yes</h1>

也能夠用 v-else 添加一個 「else」 塊：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

在<template>中配合v-if 渲染一整組

由於 v-if 是一個指令，須要將它添加到一個元素上。可是若是咱們想切換多個元素呢？此時咱們能夠把一個 <template> 元素當作包裝元素，並在上面使用 v-if。最終的渲染結果不會包含 <template> 元素。

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

v-else v-else-if

v-else 元素必須緊跟在 v-if 或者 v-else-if 元素的後面——不然它將不會被識別。v-else-if，顧名思義，充當 v-if 的「else-if 塊」。能夠鏈式地使用屢次：

<h1 v-if="grade>=60">及格</h1>
<h1 v-else-if="grade>=90">優秀</h1>
<h1 v-else>不及格</h1>

var vm=new Vue({
        data:{
            grade:60
        }
            });

相似於 v-else，v-else-if 必須緊跟在 v-if 或者 v-else-if 元素以後。

用key管理可複用的元素

Vue 會盡量高效地渲染元素，一般會複用已有元素而不是從頭開始渲染。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

var vm=new Vue({
    el:"#app",
    data:{
        loginType:'email'
    },
    methods:{
        qiehuan:function(){
            if(this.loginType=="email"){
                this.loginType=="username"
        }else{
            this.loginType=="email"
        }
    }
    }
});

那麼在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。
Vue 爲你提供了一種方式來聲明「這兩個元素是徹底獨立的——不要複用它們」。只需添加一個具備惟一值的 key 屬性便可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

注意，<label> 元素仍然會被高效地複用，由於它們沒有添加 key 屬性。

v-show

帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。

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

注意， v-show 不支持 <template> 語法，也不支持 v-else。

v-if vs v-show

v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不太可能改變，則使用 v-if 較好。

v-if與v-for一塊兒用

當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。

<ul>
   <li v-for="item in items" v-if="item.isOk">{{item.text}}</li>
</ul>

var vm=new Vue({
 data:{
     items:[
        {text:"chifan",isOk:true},
        {text:"shuijue",isOk:false},
        {text:"kandianshi",isOk:true},
        {text:"dayouxi",isOk:true},
        {text:"kandianying",isOk:false},
     ]                   
 }
});

若是你的目的是有條件地跳過循環的執行，那麼能夠將 v-if 置於外層元素 (或 <template>)上。