zoukankan      html  css  js  c++  java
  • vue中v-if和v-show

      vue中的指令(指特殊的带有前缀v-的命令,指令的值限定为绑定表达式,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。):v-if和v-show,二者都是条件渲染:

      v-if根据表达式的值true或false在DOM中生成或者移除一个元素(或多个元素),用来控制DOM节点。类似于js中的if条件判断,后面可以跟v-else、v-else-if。如果想切换多个元素时,可以把<template>当为包装元素,并在其上使用v-if,最终的渲染结果不会包含它。

      v-show是用来控制DOM节点的display属性,当v-show传入的值为true时,对应display的值为block之类的,当为false时,对应的值为none,不支持<template>。

      v-if和v-show都能控制DOM元素的显示和隐藏,但是在切换v-if模块时,Vue有一个局部编译/卸载过程,因为v-if中的模板可能包括数据绑定或者子组件,v-if是真是的条件渲染,它会确保条件快在切换时合适的销毁与重建条件块内的时间监听器和子组件。

      v-if是真正的条件渲染,他会确保条件快在切换时,合适地销毁和重建条件快内的事件监听器和子组件。

      v-if是惰性的,如果初始条件为假时什么也不做,在条件第一次为真时才开始编译(编译会被缓存起来)。

      相比之下,v-show始终被编译并保留,只是简单地基于CSS切换。

      一般来说,v-if有真高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁的切换用v-show;如果运行时条件不大可能改变,用v-if。

  • 相关阅读:
    golang的reflect
    minium-介绍
    selenium+Node.js在windows下的配置和安装
    Jmeter-逻辑控制器之Switch控制器(Switch Controller)
    Jmeter-逻辑控制器之Foreach
    chrome插件-YSlow 一个使用的web性能测试插件
    jmeter
    Jmeter-从数据库中获取数据并作为变量传输
    Jmeter-无法启动,'findstr'不是内部或外部命令,也不是可运行的程序
    Jmeter-响应结果unicode转成中文显示
  • 原文地址:https://www.cnblogs.com/zqcoding/p/8269087.html
Copyright © 2011-2022 走看看