>

元素仍然会被高效地复用,也不支持v-else  元素

- 编辑:澳门博发娱乐官网 -

元素仍然会被高效地复用,也不支持v-else  元素

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

基准渲染


v-if

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

<h3 v-else>No</h3>

常用的授命有:v-if, v-on, v-show, v-else, v-else-if, v-bind, v-for

v-if 在html中使用

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

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>

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

#在<template>成分上使用v-if条件渲染分组

因为v-if是多个限令,所以必得将它增加到八个因素上

<template v-if="ok">

    <h3>title</h3>

    <p>paragraph</p>

</template>

#v-else

能够运用v-else指令来代表v-if的else块

<div v-if="Math.random() > 0.5">

    Now  you see

</div>

<div v-else>

    Now you 

</div>

v-else 成分必须紧跟在带v-if或许v-else-if的因素的后面,否则它将不会被辨认

1.v-if指令与v-show指令(注意区分)

v-if和v-show的分别:v-show也便是在规范不树立的时候给元素加上三个style="display:none"

v-if 是“真正”的法则渲染,因为它会保障在切换进度中标准块内的风浪监听器和子组件适本地被销毁和重新建立。

v-if 也是惰性的:假设在起来渲染时规格为假,则什么也不做——直到条件首回变成真时,才会起来渲染条件块。

比较之下,v-show 就差不离得多——不管早先标准是何等,元素总是会被渲染,並且只是简短地基于 CSS 进行切换。

一般的话,v-if 有更加高的切换费用,而 v-show 有越来越高的启幕渲染开支。由此,假诺供给万分频仍地切换,则应用 v-show 较好;借使在运维时规格相当少改动,则利用 v-if 较好。

v-if的用法注意引号:

v-if="t > 30" #若t>30则表达式成立,则渲染的内容有效
v-if="t >== 30"
v-if="t === 30"

#demo:
<div id="app-4">
    <p v-if="t >= 30">t已经大于30了!</p>
    <p v-if="t < 15">t已经小于15了!</p>
    <p v-if="t = 100">great!</p>
    # 注意这个地方
    <p v-if="w === 'ab'">显示</p>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-4',
        data:{
            t:100,
            w:'ab'
        }
    })
</script>

因为 v-if 是贰个指令,所以必需将它增加到三个因素上。不过一旦想切换多个要素呢?此时内需<template>标签了:

<div id='app-12'>
  <template v-if="a === 'OK'">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-12',
        data:{
            a:'OK'
        }
    })
</script>

渲染的结果:

<div id="app-12">
   <h1>Title</h1>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

v-show的用法:
留心一点:v-show 不匡助 <template> 成分,也不协理 v-else。

<div id="app-5">
    <p v-show="sex==='male'">先生</p>
    <p v-show="sex==='female'">女士</p>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-5',
        data:{
            sex:'male',
        }
    })
</script>

v-if 渲染结果将不包罗 <template> 元素

<template v-if="ok">
  <h1>part1</h1>
  <p>part1</p>
  <p>part3</p>
</template>

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

v-else:你能够应用v-else指令来代表v-if的“else 块”。v-else成分必须紧跟在v-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 的要素之后

2.v-else-if

用法:接v-if指令

 #注意用法若被等于的对象是字符则可以用“===”为数字则只能“=,>,<”
<div v-if="type === 'A'">   
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>

2.1.0 新增 v-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 指令来代表 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 成分的前面——不然它将不会被辨认。

v-else-if:2.1.0 新添v-else-if,看名称就会想到其意义,充当v-if的“else-if 块”。能够链式地动用频仍。类似于v-else,v-else-if必需紧跟在v-if或然v-else-if成分之后

#用key管理可复用的成分

Vue会尽只怕飞快地渲染成分,经常会复用已有成分实际不是从头起头渲染

那么在上头的代码中切换 loginType 将不会免去客户已经输入的内容。因为七个模板使用了同等的成分,不会被调换掉——仅仅是替换了它的 placeholder。

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

//以往,每便切换时,输入框都将被再一次渲染。

<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 you email address" key="email-input">

</template>

    UserName         Email     

3.注意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>

不过尔尔也会促成一个害处,正是输入框的内容不会刷新,若想要输入框的剧情刷新,则要求选取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>

key 管理可复用的要素

那多个要素是一心独立的,不要复用它们”。只需增加七个具有独一值的 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-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 成分之后。

图片 1

v-show

v-show指令根据条件是不是出示成分. 注意,v-show 不帮衬<template>元素,也不协理v-else  成分,也不辅助 v-else

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

4.v-for指令

本条要留神指令的职分,和django中的模板渲染地方某些不一致。注意一点:v-for的事先级比v-if的事先级更加高。
demo:

<div id='app-1'>
    <ol>
       #注意循环渲染的位置!!!
       <li v-for="item in items">{{item.text}}</li>
    </ol>
</div>
<script type="text/javascript">
    new Vue({
        el:'#app-1',
        data:{
            items:[
                {text:'hello'},
                {text:'twy'},
                {text:'please'}
            ]
        }
    })
</script>

# 这里主要是用来说明v-for的优先级比v-if的优先级更高
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

v-show

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

要素始终会被渲染并保留在 DOM 中,切换元素的 CSS 属性 display

留心,v-show 不帮忙 <template> 成分,也不帮衬 v-else。

用 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 属性。

本文由胜博发-编程发布,转载请注明来源:元素仍然会被高效地复用,也不支持v-else  元素