handlebars 怎么用else if
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了handlebars 怎么用else if相关的知识,希望对你有一定的参考价值。
参考技术A #if haveIf我有Ifelse我没有If/if;#each arr
<p>this.a > > <span>this.data</span></p>
/each
!迭代这条对象
#each test
!如果满足条件就打印第一个模版, 如果不满足条件就打印第二个模版, helper做的只是对数据进行判断而已
#inverse
<p>this.direct</p>
else
<p>inverse:this.inverse</p>
/inverse
/each
Vue.2.0.5-条件渲染
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>
template v-if
因为 v-if
是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个 <template>
元素当做包装元素,并在上面使用 v-if
,最终的渲染结果不会包含它。
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
v-else
可以用 v-else
指令给 v-if
添加一个 “else” 块:
<div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div>
v-else
元素必须紧跟在 v-if
元素的后面——否则它不能被识别。
v-show
另一个根据条件展示元素的选项是 v-show
指令。用法大体上一样:
<h1 v-show="ok">Hello!</h1>
不同的是有 v-show
的元素会始终渲染并保持在 DOM 中。v-show
是简单的切换元素的 CSS 属性 display
。
注意 v-show
不支持 <template>
语法。
v-if vs. v-show
v-if
是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下, v-show
简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说, v-if
有更高的切换消耗而 v-show
有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show
较好,如果在运行时条件不大可能改变则使用 v-if
较好。
以上是关于handlebars 怎么用else if的主要内容,如果未能解决你的问题,请参考以下文章
伸手党来了,handlebars怎么判断值是不是包含某个字符串