因为 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. ie下,jquery为动态添加的节点添加事件,用live

    jQuery向动态生成的内容添加事件响应 jQuery live() 方法详解 [收藏] 发布时间:2013-07-24 点击次数:176 来源:www.daimajiayuan.com jQuery ...

  2. cms .net webform去服务器控件标签化 pagebase新版本

    这是最近在干一个webform的cms的时候用起来的,原来虽然做过很多技术,什么remoting,wcf,webservice,可是弄来弄去,最后也没个收藏的地儿,全都放在笔记本儿上了,可是人又懒地可 ...

  3. 行为型设计模式之职责链模式(Chain of Responsibility)

    结构 意图 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 适用性 有多个的对象可以处理一个请求,哪个 ...

  4. Hidden (NOIP模拟赛)(字符串模拟QAQ)

    原题传送门 神奇的题目诶 原来以为字符串比较一定要O(NlogN) 结果发现可以均摊O(N) 首先我们来讲一讲原理 我们有3个指针i,j,k i=0,j=1,k=0 一开始我们不断对k+1直到找到ch ...

  5. 【原创】Linux环境下的图形系统和AMD R600显卡编程(7)——AMD显卡的软件中断

    CPU上处理的中断可以分成“硬件中断”和“软件中断”两类,比如网卡产生的中断称为硬件中断,而如果是软件使用诸如"int 0x10"(X86平台上)这样的指令产生中断称为软件中断,硬 ...

  6. 28.Implement strStr()---kmp

    题目链接:https://leetcode.com/problems/implement-strstr/description/ 题目大意:字符串匹配,从字符串中,找到给定字符串第一次出现的位置下标, ...

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

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

  8. 【原创】SSAS-引用维度与多数据源、多数据源视图引发分区错误

    背景: 最近有个项目,有32家分公司,集团总部需要取这个32家分公司数据做分析,由于每个分公司的数据都比较庞大,所以最终方案是每个分公司一个DW,在cube搭建过程中将每个公司数据作为一个分区数据的来 ...

  9. 如何让springboot中的某些html文件不经过thymeleaf模板解析?

    这个thymeleaf有时有用,有时用不着. 但默认设置,所有的html都会经过它解析. 我的作法,是新建public,在resource里,所有css,js所放里面.(当然,static下也是OK的 ...

  10. thinkphp函数学习(3): C函数详解

    function C($name=null, $value=null,$default=null) { static $_config = array(); // 无参数时获取所有 if (empty ...