因为 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. Html5学习进阶二 画布

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  2. Oracle 数据库维护相关

    版本升级 在维护数据库升级的过程中,会产生n个脚本.谈谈我所处的项目背景,项目数据库最早版本假定为1,最后在多次维护后,版本号,可能变更为16.那么针对项目上不同的数据库版本,如何来进行升级呢? 我使 ...

  3. RadioGroup和RadioButton(单选框)

    1.布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  4. 优化html中mp4视频加载速度

    如果使用参数faststart就会在生成完上边结构之后将moov移动到mdat前面:ffmpeg –i input.flv –c copy –f mp4 –movflags faststart out ...

  5. django使用mysql的设置与迁移

    1.创建数据库 create database django_lianxi charset=utf8; 2.django项目文件夹的setting.py设置 Django项目默认 sqlite3 数据 ...

  6. linux nbd & qemu-nbd

    网络块设备:  Network Block Device   可以将一个远程主机的磁盘空间,当作一个块设备来使用.就像一块硬盘一样. 使用它,你可以很方便的将另一台服务器的硬盘空间,增加到本地服务器上 ...

  7. hdu 5083(模拟)

    Instruction Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. ppt提取图片,视频文件

    1,将视频另存为htm格式,然后会生成文件夹,里面就有. 2,如果没法生成htm格式,可以生成odp格式,压缩文件,用解压缩软件查看odp文件,就能看到. 3,pptx直接修改后缀为rar或者zip, ...

  9. easyui常用

    清空列表选中项 //easyui datagrid 清空勾选 $('#List').datagrid('clearSelections'); 扩展修改查询方法 function QueryList() ...

  10. js-监听页面滚动

    两种监听页面滚动的方法 一.原生js通过window.onscroll监听 window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 //scr ...