因为 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. Winform 模拟Session

    背景 在Web中Session的功能很好用,于是想Winform中实现该功能,典型应用场景则是登陆成功后,当一段时间不操作,则该会话过期,提示重新登陆. 资源下载 测试代码 示例说明:登陆进去10s不 ...

  2. wget下载整个网站的方法

    转自: http://blog.itpub.net/29867/viewspace-716088/  (修改部分内容) wget --restrict-file-name=ascii -m -c -n ...

  3. 【转载】Photoshop-制作图片圆角2种方法

    学习网址:http://www.23ps.com/photoshop/cjjc/300002034.htm 方案一: 使用选区和蒙版相结合,用图章制作圆角选区,删除多余部分 效果: 实现步骤: 一.如 ...

  4. MVC中路由器程序

    MVC中路由器程序编写方式如下例子 把地址:/home/add?id=1 改写成:/home/add/1 把地址:/home/edit?id=1&sid=2 改写成:/home/edit/1_ ...

  5. yii2 ftp 的常规操作 上传 下载

    <?php function make_directory($ftp_stream, $dir){ // if directory already exists or can be immedi ...

  6. JavaScript 性能优化的小知识总结

    前言 一直在学习 javascript,也有看过<犀利开发 Jquery 内核详解与实践>,对这本书的评价只有两个字犀利,可能是对 javascript 理解的还不够透彻异或是自己太笨,更 ...

  7. POJ 3264.Balanced Lineup-RMQ(ST)详解

    先写一道水题的博客,为后面要写的博客做一个铺垫. ヾ(◍°∇°◍)ノ゙ RMQ(Range Minimum/Maximum Query),即区间最值查询,对于长度为n的数列A,回答若干询问RMQ(A, ...

  8. UVALive 3027 Corporative Network (带权并查集)

    题意: 有 n 个节点,初始时每个节点的父节点都不存在,你的任务是执行一次 I 操作 和 E 操作,含义如下: I  u  v   :  把节点 u  的父节点设为 v  ,距离为| u - v | ...

  9. 洛谷——1164 小A点菜(背包方案数)

    大水题!! 题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过uim由于买 ...

  10. (寒假集训) Piggyback(最短路)

    Piggyback 时间限制: 1 Sec  内存限制: 64 MB提交: 3  解决: 3[提交][状态][讨论版] 题目描述 Bessie and her sister Elsie graze i ...