Vue.js 条件与循环
条件判断
v-if
条件判断使用 v-if 指令:
v-if 指令
在元素 和 template 中使用 v-if 指令:
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术,更是梦想!</p>
<p>哈哈哈,打字辛苦啊!!!</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
尝试一下 »
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:
<!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}}
v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块:
v-else 指令
随机生成一个数字,判断是否大于0.5,然后输出对应信息:
<div id="app">
<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
尝试一下 »
v-else-if
v-else-if 在 2.1.0 新增,顾名思义,用作 v-if 的 else-if 块。可以链式的多次使用:
v-else 指令
判断 type 变量的值:
<div id="app">
<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>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>
尝试一下 »
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
我们也可以使用 v-show 指令来根据条件展示元素:
苏安年
188***625@qq.com
给 Num 绑定一下,可以看出来随机数字是多少:
尝试一下 »
苏安年
188***625@qq.com
简单道人
287***571@qq.com
参考地址
v-if 与 v-show 的区别?
在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
简单道人
287***571@qq.com
参考地址
ILE_HAO
719***187@qq.com
ILE_HAO
719***187@qq.com
M.森
153***7040@qq.com
参考地址
v-else-if 使用实例:
尝试一下 »
M.森
153***7040@qq.com
参考地址
离海的枯梧
610***433@qq.com
v-if 和 v-show 区别:
v-if 是动态添加,当值为 false 时,是完全移除该元素,即 dom 树中不存在该元素。
v-show 仅是隐藏 / 显示,值为 false 时,该元素依旧存在于 dom 树中。若其原有样式设置了 display: none 则会导致其无法正常显示。
离海的枯梧
610***433@qq.com
晓晓的寄己
867***282@qq.com
演示 v-else-if 用法,根据分数来判断等级:
尝试一下 »
晓晓的寄己
867***282@qq.com
隐
hyx***63@163.com
关于 <template></template> 内容可见性问题:
当 <template> 元素被包含在已被 vue 实例化之后的组件中时浏览器会正常渲染 可以用 v-if="false" 隐藏浏览器不会解析,不能使用 v-show。
当 <template> 存在于未被 vue 实例化的组件中时可以正常隐藏,天生 display:none。
隐
hyx***63@163.com