你可以使用v-else指令来表示v-if的,v-else 元素必须紧跟在 v-if 或者

  • 栏目:前端 时间:2020-01-04 13:03
<返回列表

图片 1

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

v-if 在html中使用

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

使用方法

v-if:使用v-if指令实现元素是否显示

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

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

v-if :

v-else:你可以使用v-else指令来表示v-if的“else 块”。v-else元素必须紧跟在v-if或者v-else-if元素的后面——否则它将不会被识别

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>
h1 v-if="xkd"侠课岛/h1

v-else-if:2.1.0 新增v-else-if,顾名思义,充当v-if的“else-if 块”。可以链式地使用多次。类似于v-else,v-else-if必须紧跟在v-if或者v-else-if元素之后

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

template 中配合 v-if 条件渲染一整组 :

图片 2

v-show

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

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

注意,v-show 不支持 <template> 元素,也不支持 v-else。

template v-if="a"h1Title/h1pParagraph one/ppParagraph two/p/template

条件渲染应用在模板上(</template>)或者组件上

v-if vs v-show

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

使用v-else 指令来表示 v-if 的 else,v-else 元素必须紧跟在 v-if 或者 v-else-if元素的后面,否则它将不会被识别 :

因为v-if是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个<template>元素当做包装元素,并在上面使用v-if。最终的渲染结果不会包含<template>元素。

v-if 与 v-for

当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

h1 v-if="a"True/h1h1 v-elseFALSE/h1 

图片 3

多次使用 v-if :

v-show

h1 v-if="color == 'red'" 红/h1h1 v-else-if="color == 'green'" 绿/h1h1 v-else="color == 'blue'" 蓝 /h1

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

如图所示:

不同的是有v-show的元素会始终渲染并保持在 DOM 中。v-show是简单的切换元素的 CSS 属性display。

key 管理可复用的元素

注意v-show不支持<template>语法。也不支持v-else。

通常会复用已有元素而不是从头开始渲染,key使得Vue渲染速度会变得非常快。

图片 4

下面是key的使用方法:

v-if和v-show的区别

body div  template v-if="loginType === 'username'" label用户名/label input placeholder="请输入用户名" key="username-input" / /template template v-else label邮箱/label input placeholder="请输入邮箱" key="email-input" / /template input type="button" value="切换" v-on:click="changeType" / /div/bodyscript var vm = new Vue({ el: '#main', data: { 'loginType': 'username' }, methods: { changeType: function() { if (this.loginType == 'username') { this.loginType = 'email'; } else { this.loginType = 'username'; } } } })/script

v-if是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-show vs v-if

v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

v-show:

相比之下,v-show就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

h1 v-show="xkd"Hello!/h1

一般来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件不太可能改变,则使用v-if较好。

v-show:比较简单,不管初始条件是什么,元素总是会被渲染,并且只是简单的基于CSS进行变换。初始渲染开销较大。

v-if 与 v-for 一起使用

v-if:有更高的切换开销。

当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

如果需要非常频繁的切换,那么使用v-show比较好;如果在运行条件不太可能改变的情况下,则使用v-if较好。

用key管理可复用的元素

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

上一篇:首先先看下变量提升的规则,把所有变量的声明都提升到当前作用域的最前面 下一篇:此时你就可以通过proxyTable来解决跨域问题,规范也支持得并不全

更多阅读

你可以使用v-else指令来表示v-if的,v-els

前端 2020-01-04
v-if和v-else和v-else-if v-if 在html中使用 h1 v-if="ok"Yes/h1h1 v-elseNo/h1 使用方法 v-if:使用v-if指令实现...
查看全文

此时你就可以通过proxyTable来解决跨域问题

前端 2020-01-04
target:"",//访问的服务器地址changeOrigin:true,//true为开启代理pathRewrite:{ '^/user': '/'//路径的替换规则...
查看全文

SPA应用的核心在于使用无刷新的方式更改

前端 2020-01-04
问题: 本文介绍如何使用backbone的history模块实现SPA应用里面的URL管理。SPA应用的核心在于使用...
查看全文

友情链接: 网站地图

Copyright © 2015-2019 http://www.koi-bumi.com. 韦德体育有限公司 版权所有