条件语句

v-if

在Vue中，我们可以使用 v-if 指令实现条件判断功能。

<div v-if="seen">you can saw me </div>

实例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 -条件语句 </title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="seen">you can saw me </div>
</div>
<script>
new Vue({
  el: '#app',
    data:{
        seen:true
    }
})
</script>
</body>
</html>

如果‘seen’为true显示，反之不显示。

在 template 中使用 v-if 指令：

案例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 条件语句</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p v-if="seen">you now saw me</p>
    <template v-if="ok">
      <h1>学习</h1>
      <p>啊哟！不错哟</p>
      <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script>
</body>
</html>

v-else

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

案例3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 条件语句</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="number > 0.5">
      {
     {number}}大于0.5
    </div>
    <div v-else>
     {
     {number}}小于0.5
    </div>
</div>
<script>
new Vue({
  el: '#app',
  data:{
      number:Math.random()
    }
})
</script>
</body>
</html>

v-else-if

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：

案例4

<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 条件语句</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="interest === 'Sing'">
      I  like  Sing
    </div>
    <div v-else-if="interest === 'Dance'">
      I  like  Sing
    </div>
    <div v-else-if="interest === 'KnockCode'">
      I  like  Knock code
    </div>
    <div v-else>
     I dont like anything ！
    </div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    interest: 'KnockCode'
  }
})
</script>
</body>
</html>

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

案例5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 用 key 管理可复用的元素</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <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>
    <br>
<button v-on:click='changeType'>change login way</button>
</div>
<script>
new Vue({
  el: '#app',
    data:{
        loginType:'username'
    },
     methods: {
         changeType:function(){
             return this.loginType=this.loginType ==='username'?'email':'username'
         }
     }
})
</script>
</body>
</html>

代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， <input> 不会被替换掉——仅仅是替换了它的 placeholder 。所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可。

v-show

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

案例6

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 -v-show测试</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>
</body>
</html>