Vue内置指令——v-show

2023-05-16

v-show的用法与v-if类似,不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 v-show="ok">Hello!</h1>
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    ok:false//true
                }
            });
        </script>     
    </body>
</html>

在这里插入图片描述
v-if VS v-show
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue内置指令——v-show 的相关文章

随机推荐

  • VMware共享本机网络

    VMware共享本机网络 一 设置桥接模式 xff1a 左上角菜单栏 gt 虚拟机 gt 设置 gt 网络适配器 xff08 如图操作 xff09 二 编辑虚拟网络 左上角菜单栏 gt 编辑 gt 虚拟网络编 xff08 如图操作 xff0
  • vim设置行号

    vim设置行号 方法一 xff1a 临时 或者 方法二 xff1a 当前用户永久 1 修改vim配置文件vimrc vim vimrc 输入 xff1a set number 或 set nu 保存退出 方法三 所有用户 1 vim etc
  • tomcat 配置https

    一 生成证书 1 使用jdk自带的keytool ext生成证书 xff0c 进入jdk下bin目录 xff1b 2 在路径栏输入cmd 回车打开dos命令窗口 xff0c 打开之后当前路径为jdk下bin目录 ps xff1a 也可直接w
  • Google http测试工具

    一 下载 xff1a 下载地址 xff1a https pan baidu com s 16mCI0QUn z0kNPX4yqGEWg 提取码 xff1a sgiz 二 配置 1 解压文件 2 在Google里配置插件 xff0c 或者叫扩
  • linux mysql 离线安装

    一 下载 1 官网地址 https dev mysql com downloads mysql 点击Archives 选择需要的版本 点击Download 进行下载 xff0c 如需要登录自行注册登录 将下载的安装包上传至linux系统 2
  • cmd介绍及常用命令

    cmd介绍 cmd基本概念 cmd commander xff0c 命令提示符是在操作系统中 xff0c 提示进行命令输入的一种工作提示符 在不同的操作系统环境下 xff0c 命令提示符各不相同 在windows环境下 xff0c 命令行程
  • 计算机的发展史

    计算机的发展史 计算机的前身 1642年的时候 xff0c 一位19岁的法国小伙设计并制作了一台能自动进位的加减法计算装置 xff0c 一开始是只能算加法的 xff0c 所以叫 加法器 后来慢慢改良 xff0c 可以做加减乘除的四则运算 x
  • 利用Radiogroup Radiobutton 实现滑动效果菜单

    第一次在满世界大侠的地方撰写博客 xff0c 所以不免紧张 xff0c 怕自己写出让人消掉大牙的文章 本着学习的态度 xff0c 最后我还是决定把自己的学习感想记录下来 首先我要感谢一个哥们 xff0c 大部分的内容都是他的杰作 xff0c
  • 一、初识VUE

    一 什么是vuejs VUE是一个渐进式的框架 xff0c 什么是渐进式呢 xff1f 渐进式意味着可以将vue作为应用的一部分 xff0c 嵌入应用 也就是说 xff0c 在一个整体项目中 xff0c 部分可用jQuery xff0c 部
  • Linux目录概述

    一 概述 由于开发linux发行版的社区或这企业太多 xff0c 如过每个Linux发行版的目录结构都不相同 那么在管理和使用上会造成很多困扰 xff0c 所以就有了FHS Filesystem Hierarchy Standard 的出现
  • ls与cp命令详解

    一 文件与目录检视 ls a xff1a 全部的文件 xff0c 连同隐藏文件 xff08 开头为 的文件 xff09 一起列出来 xff08 常用 xff09 A xff1a 全部的文件 xff0c 连同隐藏文件 xff0c 但不包括 与
  • linux 安装JDK

    一 下载JDK 版本 xff1a jdk 8u191 linux x64 tar gz 链接 xff1a https pan baidu com s 1w9HpHBRPHCfoiEpGSKJqXA 提取码 xff1a whya 二 安装 创
  • java调用DLL之jna

    一 添加maven依赖 span class token comment lt https mvnrepository com artifact net java dev jna jna gt span span class token t
  • 三、vue :定义变量、v-for、v-on示例

    一 vue定义变量 let xff1a 定义变量const xff1a 定义常量 contst定义常量时 xff0c 必须赋值 指向的对象不可改变 xff0c 但是对象中的属性 contst obj 61 name 39 张三 39 obj
  • 二、vue插值操作

    一 Mustache mustache语法就是两个大括号 34 34 mastache语法不仅直接可以写值 xff0c 也可以写一些简单的表达式 span class token tag span class token tag span
  • 二、vue中v-bind使用

    一 v bind基本使用 一个页面中 xff0c 除了标签内容需要动态绑定外 xff0c 标签的属性也需要动态绑定 xff0c 例如 xff1a a元素的href属性和img元素的src属性 这时就需要用到v bind了 span clas
  • 四、vue计算属性的使用

    通常 xff0c 在模板中可直接通过插值语法显示data中的属性 xff0c 但是在某些情况 xff0c 需要将某些数据进行转化后显示或者将多个数据结合起来显示 计算属性的基本使用 span class token tag span cla
  • firewall-cmd 端口管理

    1 开放端口 firewall span class token operator span cmd span class token operator span zone 61 public span class token operat
  • BIND 高级特性(二)-- 动态更新(转)

    BIND 高级特性 xff08 二 xff09 xff0d xff0d 动态更新 转 64 more 64 在很多大的网络中为了简化维护量 xff0c 都使用了DHCP来动态分配IP地址 这样就要求DNS也能够动态的添加和删除记录 BIND
  • Vue内置指令——v-show

    v show的用法与v if类似 xff0c 不同的是带有 v show 的元素始终会被渲染并保留在 DOM 中 v show 只是简单地切换元素的 CSS 属性 display span class token doctype span