v-if

在 Vue.js ，我们使用 v-if 指令实现的功能

也可以用 v-else 添加一个 “else” 块

template-if

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果我们想切换多个元素呢？此时我们可以把一个<template>元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它

v-else

可以用 v-else 指令给 v-if 或 v-show 添加一个 “else” 块

v-else 元素必须紧跟在 v-if 或 v-show 元素的后面——否则它不能被识别

v-show

另一个根据条件展示元素的选项是 v-show 指令。用法大体上一样

v-if vs v-show

如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好

Vue基础之Vue条件渲染相关推荐

浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
【Vue教程四】条件渲染、列表渲染、数组更新
一.条件渲染:[v-if][v-show] 1.v-if 指令用于条件性地渲染一块内容. 1.1.在元素中使用 v-if 指令: <body><div id="app&qu ...
史上最详细 VUE2.0 全套 demo 讲解基础4（条件渲染）
作者 : 混元霹雳手 - Ziksang 三篇基础发布之后,收到最多的就是谢谢楼主,其次的就是错别字有点多,这篇我肯定写完之后读三遍,现在已经是夜里2点了,如果还有没有发现大家就容忍一下,这次我将要讲 ...
Vue全家桶（一）：Vue基础+Vue-Cli+Vue组件化+过渡动画
目录 1.Vue概述 1.1 认识Vue 1.2 Vue的两核心 1.3 Vue的初体验 1.4 Vue的生命周期 2. Vue-CLI (Command Line Interface) 3. Vue ...
Vue3.0基础教程：条件渲染：v-if v-else-if v-if；列表渲染：v-for
Vue3.0 学习笔记 4 条件渲染 v-if指令 v-if指令用于动态渲染一块内容,只有当该指令的表达式值为true时才渲染,也可配套使用v-else指令设置一个else-if块和else块 < ...
【Vue基础】Vue基础自测45题
Vue基础自测45题 1.什么是Vue?Vue的核心理念是什么? 2.什么是MVC和MVVM? 3.框架和库的区别? 4.插值表达式 5.vue指令界面防止闪烁 6.vue指令v-html和v-tex ...
微信小程序基础2【条件渲染、swiper组件、生命周期、发起请求API】
视频地址: https://www.bilibili.com/video/BV1cW411T7t6 [2018]学做小程序- 清华大学 https://www.bilibili.com/video/ ...
Vue基础之Vue实例
构造器: 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的: 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选项. ...
【一天时间|vue基础】vue组件间通信
一天时间系列文章是博主精心整理的面试热点问题和难点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速并高效地审视前端面试知识.直击技术痛点,主动出击,精密打击,这才是面试拿到高薪的秘诀 ...

Vue基础之Vue条件渲染