因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

注意,v-show 不支持 <template> 元素,也不支持 v-else

v-if 条件渲染分组的更多相关文章

  1. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  2. vue基础---条件渲染

    (1)v-if条件渲染 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. 可以用 v-else 添加一个“else 块”: ①表达式 <di ...

  3. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  4. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  5. 第六十三篇:Vue的条件渲染与列表渲染

    好家伙, 1.条件渲染v-if 1.1.v-if基本使用 <body> <div id="app"> <p v-if="flag" ...

  6. CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率

    CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率 当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...

  7. 微信小程序-视图条件渲染

    条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...

  8. 关于vue.js中条件渲染的练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  9. Vue#条件渲染

    根据不同的条件,响应不同的事件. https://jsfiddle.net/miloer/zed5p1r3/ 可以用template来包装元素,当然浏览器的最终渲染结果不会包含它.我觉得主要用它来自定 ...

随机推荐

  1. 信息竞赛程序卡时_C++

    一.卡时简介 卡时是一个竞赛时常用的技巧 有些题目我们想不到完美算法就只能用暴力解决,但是此类方法一般时间复杂度较高,此时我们需要进行卡时 通俗来讲就是进行一个时间限制,让程序在达到这个时间后立马退出 ...

  2. [BZOJ1294][SCOI2009]围豆豆Bean 射线法+状压dp+spfa

    1294: [SCOI2009]围豆豆Bean Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 458  Solved: 305[Submit][Sta ...

  3. (2)apache安装、配置及使用

    一.apache安装 假设我们我们的安装路径是 C:\Apache2.2 运行软件 如果是本地学习使用 第二行服务名localhost 其他随便 一个自动安装,一个自定义安装,没有什么特别重要的,一直 ...

  4. Python的支持工具[1] -> 可执行文件生成工具[1] -> cx_freeze

    cx_freeze cx_Freeze 是一个第三方库,可以用于将 Python 的代码打包成可执行文件,下面介绍如何利用一个脚本文件将 Python 代码变为 exe 可执行文件. 首先,需要安装 ...

  5. SPOJ705 SUBST1 - New Distinct Substrings(后缀数组)

    给一个字符串求有多少个不相同子串. 每一个子串一定都是某一个后缀的前缀.由此可以推断出总共有(1+n)*n/2个子串,那么下面的任务就是找这些子串中重复的子串. 在后缀数组中后缀都是排完序的,从sa[ ...

  6. Flash 3D学习计划

    1.理解并记住3D渲染的一般管线流程(一天). 2.理解世界,取景,投影变换,并理解投影坐标系(一天). 3.学习VB,IB相关,理解三角形顶点顺序:在屏幕上显示2D矩形,并实现缩放,平移,旋转(三天 ...

  7. 集合框架(02)List

    List的类型和特点: ArrayList:底层的数据结构使用的是数组结构.特点:查询的速度很快,但是增删稍慢 线程不同步 LinKedList:底层使用的链表数据结构.特点:增删的速度很快,查询稍慢 ...

  8. u-boot-2010.3移植到Tiny6410问题总结

    问题1: u-boot-2010.3中nand_spl文件夹的作用:实现从Nandflash启动在编译是会建立几个链接文件,用这几个链接文件生成u-boot-spl-16k.bin nand_spl/ ...

  9. HTML 中的 dl(dt,dd)、ul(li)、ol(li)

    HTML <dl> 标签 #定义和用法 <dl> 标签定义了定义列表(definition list). <dl> 标签用于结合 <dt> (定义列表中 ...

  10. ArcMAP中如何将16位保存的卫星底图,转变为8位表示

    首先说明,这种转换将会去除影像的投影像素的定义,并在转换后变为黑色的部分.16位的存储,一方面也是定义透明非数据像素点表示的方便.但是这种定义直接加大了影像的大小,不便于与CAD等软件进行交换数据.