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>)上。