>

vue 条件渲染

- 编辑:乐百家599手机首页 -

vue 条件渲染

一、v-if展现单个成分

gitHub地址:https://github.com/manlili/vue_learn里面lesson08

 

v-if和v-else和v-else-if

v-if

在字符串模板中,如 Handlebars ,我们得像这么写三个准则块:

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在 Vue.js ,大家采用 v-if 指令达成均等的法力:

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

也足以用 v-else 增添三个 “else” 块:

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

注意else只可以跟在v-if只怕v-show前面

一 v-if展现单个成分

注意else只可以跟在v-if也许v-show前面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue条件渲染</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div v-if="isDisplay">   <!--if...else... 单个元素-->
                显示我1
            </div>
            <div v-else>
                显示我2
            </div>
        </div>
        <script type="text/javascript">
            var myVue =new Vue({
                el: ".test",
                data: {
                    isDisplay: 1
                }
            })
        </script>
    </body>
</html>

出口结果是:突显本人1

 

v-if:使用v-if指令实现要素是不是出示

在 <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>

注意: 此处template出不能够声称vue,可在template成分以上的功能域注解vue
如下:

 <div class="box">
    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
  </div>
  <script>
    var vm = new Vue({
      el: ".box",
      data: {
        ok: true
      }
    })
  </script>
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div class="test">
 <div v-if="isDisplay"> <!--if...else... 单个元素-->
 显示我1
 </div>
 <div v-else>
 显示我2
 </div>
 </div>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

二 v-if显示两个要素,需合营<template>

注意else只可以跟在v-if也许v-show前边

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue条件渲染</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <template v-if="isDisplay"> <!--if...else... 用template实现多个元素-->
                <div>显示我1</div>
                <div>显示我11</div>
                <div>显示我12</div>
                <div>显示我13</div>
            </template>
            <div v-else>
                显示我2
            </div>
        </div>
        <script type="text/javascript">
            var myVue =new Vue({
                el: ".test",
                data: {
                    isDisplay: 1
                }
            })
        </script>
    </body>
</html>

出口结果: 彰显本人1 突显本人11 展现本人12 呈现本身13

 

v-else:你能够利用v-else指令来表示v-if的“else 块”。v-else元素必须紧跟在v-if大概v-else-if成分的前边——不然它将不会被识别

v-else

你能够选拔 v-else 指令来代表 v-if 的“else 块”:

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else 成分必须紧跟在 v-if 恐怕 v-else-if 成分的末端——不然它将不会被辨认。

出口结果是:显示我1

三 v-show只扶助单元素展现,不协助<template>包蕴的多成分

注意else只好跟在v-if只怕v-show前边

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue条件渲染</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div v-show="isDisplay">   <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法-->
                显示我1
            </div>
            <div v-else>
                显示我2
            </div>
        </div>
        <script type="text/javascript">
            var myVue =new Vue({
                el: ".test",
                data: {
                    isDisplay: 1
                }
            })
        </script>
    </body>
</html>

 

v-else-if:2.1.0 新添v-else-if,顾名思义,充当v-if的“else-if 块”。能够链式地使用频仍。类似于v-else,v-else-if必须紧跟在v-if或然v-else-if成分之后

v-else-if

v-else-if,以偏概全,充当 v-if 的“else-if 块”。能够链式地运用频仍:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

就疑似于 v-else,v-else-if 必须紧跟在 v-if 也许 v-else-if 成分之后。

二、v-if展现多少个要素,需协作<template>

四 v-if与v-show的区别

(1)v-if是真心诚意的渲染与卸载,只但是第一遍渲染后,会将结果缓存一下

(2)v-show成分始终被编写翻译并保存,只是简短地基于 CSS 切换

(3)总括: 假若急需频仍切换 v-show 较好,若是在运行时规格一点都不大大概改换 v-if 较好

图片 1

用 key 管理可复用的因素

Vue 会尽大概快速地渲染成分,日常会复用已有成分而不是从头早先渲染。这么做,除了使 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>

  <div class="box">
    <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>
  </div>
  <script>
    var vm = new Vue({
      el: '.box',
      data: {
        loginType: 'username'
      },
      methods: {
        toggleLoginType: function () {
          return this.loginType = this.loginType === 'username' ? 'email' : 'username'
        }
      }
    })
  </script>

那么在上头的代码中切换 loginType 将不会免去用户已经输入的源委。因为多少个模板使用了一致的因素,<input> 不会被替换掉——仅仅是替换了它的 placeholder。

那样也不延续符合实际须求,所以 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 属性。

注意else只好跟在v-if恐怕v-show前边

原则渲染应用在模板上(</template>)可能零部件上

v-show

另贰个用以依据条件显得成分的挑选是 v-show 指令。用法大约同样:

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

区别的是含有 v-show 的要素始终会被渲染并保留在 DOM 中。v-show 是简轻松单地切换到分的 CSS 属性 display 。

注意: v-show 不协理 <template> 语法,也不协助 v-else。

本文由乐百家前段发布,转载请注明来源:vue 条件渲染