美文网首页
VueJS第三课 1(条件与循环)

VueJS第三课 1(条件与循环)

作者: 叛经离道 | 来源:发表于2018-04-26 21:52 被阅读12次

条件判断

条件判断使用 v-if指令

v-if指令

可以用v-else指令 v-if 添加一个 “else”块

v-else指令

v-else-if 用作 v-if 的else-if块,可以链式的多次使用;v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-else-if

也可以使用 v-show 指令来根据条件展示元素:

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 较好。

相关文章

  • VueJS第三课 1(条件与循环)

    条件判断 条件判断使用 v-if指令 可以用v-else指令给 v-if 添加一个 “else”块 v-else-...

  • VueJS第三课 2 (条件与循环)

    循环语句 循环使用 v-for 指令 v-for 指令需要以 site in sites 形式的特殊语法,菜鸟教程...

  • vuejs—循环

    上一篇 介绍了vue.js实现条件渲染,这篇我们一起学习同样十分常见的循环。 v-for 在 v-for块内我们能...

  • vuejs循环

  • C语言中必须会用的语句

    1、循环 循环语句有for(初值;条件;循环结束后执行)循环 while(条件)循环 do{函数}while(条件...

  • Python-3.循环与判断

    本章包含内容: 逻辑控制与循环 条件控制 循环 综合练习 一、逻辑控制与循环 1、逻辑判断 —— True & F...

  • 条件与循环

    条件与循环### 条件语句: 形式: '''if 判断语句 :执行语句1elif 判断语句2:执行语句2elif ...

  • 条件与循环

    条件与循环综合

  • Shell 循环语句(三) until 循环

    until 循环与 while 循环类似,也同样基于一个条件。但是 until 循环的判断条件正好与 while ...

  • shell-while循环

    1、while循环语法格式 while 与 for 不同for 是通过次数来做循环,而while循环是看条件的正...

网友评论

      本文标题:VueJS第三课 1(条件与循环)

      本文链接:https://www.haomeiwen.com/subject/jxdelftx.html