美文网首页
3、条件与循环

3、条件与循环

作者: 1只念旧的兔子 | 来源:发表于2019-03-06 17:50 被阅读0次

1.条件渲染的含义:

  • 条件渲染指令: v-if、v-else-if、v-else
  • 可以根据表达式的值在DOM中渲染或销毁元素/组件
  • v-if和v-show不同点:v-if是真正的条件渲染,适合条件不经常变更的场景;而v-show只是简单的CSS属性切换,使用于频繁切换条件

2.举例

2.1 v-if举例:

v-if.png

2.2 v-else举例:

v-else.png

2.3 v-else-if举例:

v-else-if.png

2.4 v-show举例:

v-show.png
小注解
  • v-if 是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
  • v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
    相比之下, v-show 简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
  • 一般来说, v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。

2.5 v-if和v-show:

v-for和v-if.png

3.作业小练习操作

3.1显示书籍

显示图书信息.png

3.2蓝墨云班课

蓝墨云班课.png

相关文章

  • 3、条件与循环

    1.条件渲染的含义: 条件渲染指令: v-if、v-else-if、v-else 可以根据表达式的值在DOM中渲染...

  • 3、条件与循环

    条件渲染指令: v-if、v-else-if、v-else:可以根据表达式的值在DOM中渲染或销毁元素/组件,与v...

  • 3 条件与循环

    条件渲染指令: v-if、v-else-if、v-else:可以根据表达式的值在DOM中渲染或销毁元素/组件,与v...

  • 3、条件与循环

    三种条件渲染指令:v-if (真正的条件渲染,适合条件不经常变更的场景)、v-else-if 、v-elsev-s...

  • 3 条件与循环

    条件渲染指令: v-if、v-else-if、v-else:可以根据表达式的值在DOM中渲染或销毁元素/组件,与v...

  • 2018-05-15 第九天

    一、循环loop (三)for 循环(接上篇) 语法:for(循环条件初始化 1 ; 循环条件 2 ; 迭代 3 ...

  • 3.2循环结构

    Swift语言主要提供了for-in遍历、while与repeat-while条件循环3种循环结构。在for-in...

  • 控制流程(if、三目、while、for)(2018-11-20

    1、条件语句 2、三目运算 3、条件循环 while 4、迭代循环 for

  • 11、MySQL存储过程条件语句

    1、条件语句 if条件语句 2、循环语句 while循环 repeat循环 loop 3、动态执行SQL语句 动态...

  • 条件与循环

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

网友评论

      本文标题:3、条件与循环

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