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