github地址:https://github.com/iTao9354/basicVue/tree/master/conditional%20rendering(demo01-03)

一、v-if & v-else-if & v-else

  1.见下例:

    

    其中v-else必须紧跟在v-if或v-else-if后面。

    注意:v-else-if是2.1.0新增。

  2. 用属性key管理不需要复用的元素

   当两个元素是完全独立时,就不需要复用,此时只需添加一个具有唯一值的key属性即可。

    

二、v-show

v-show只能简单地切换元素的css属性display,既不支持<template>语法,也不支持v-else。

在控制元素是否显示时,与v-if的区别:

v-if的元素在条件为假时不会保留在DOM中,而v-show的元素在条件为假时始终会被渲染并保留在DOM中,只是display属性为none。

三、v-if vs v-show

  

四、v-if & v-for

详见列表渲染。

Vue入门笔记(二)--基础部分之条件渲染的更多相关文章

  1. vue 自学笔记(4): 样式绑定与条件渲染

    一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...

  2. 1 TensorFlow入门笔记之基础架构

    ------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...

  3. C#快速入门笔记(1)——基础语法

    C#快速入门笔记(1)——基础语法 总体框架:

  4. Vue入门(二)之数据绑定

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  5. 后端小白的VUE入门笔记, 前端高能慎入

    因为项目需要前后端分离,后端竟然不用控制view层了,页面的跳转后端不再干涉,(前端的vue经过打包后成了一张index.html) 后端只需要响应给前端json串就ok,其实这不是爽歪歪?但是觉得还 ...

  6. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  7. Vue入门笔记#数据绑定语法

    #数据绑定语法# #文本: 数据绑定的基础表型形式,使用“Mustache”语法(双大括号)(特意查了一下Mustache同“moustache”释义为:髭:上唇的胡子,小胡子,最起码我觉得挺形象的) ...

  8. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  9. vue学习笔记二:v-if和v-show的区别

    v-if vs v-show v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做—— ...

随机推荐

  1. 克服"水土不服",融云助攻小象直播杀破"出海重围"

    2016年是直播行业被资本疯狂追逐的一年,可至今却经历着“浪潮”褪去,洗刷的不止是中小型直播平台,就连熊猫TV等有资本加持的大平台都纷纷遭遇倒闭危机.然而,直播行业作为泛娱乐的模式之一,其实本身“未死 ...

  2. vue中路由跳转的底层原理

    前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来.改变浏览器地址而不向服务器发出请求有两种方式: 1. 在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航 2. 使用H5的wind ...

  3. matlab飞机飞行

    function donghua4 %首先建立一个飞机模型 %然后写一个旋转仿射矩阵 %利用仿射变换改变飞机方向 clear;clc;TR=[1 50 41;1 51 50;2 51 1;3 51 2 ...

  4. LOJ #10070 最小生成树计数

    一道mst-- 最开始是毫无头绪,于是就点开了--->题解 大部分题解都是矩阵树--然而第一篇题解告诉了我们暴搜也能过( 思路大概是说,对于一个图\(G\),它的所有最小生成树的相同权值的边的数 ...

  5. Java7/8 中的 HashMap 和 ConcurrentHashMap 全解析

    Java7/8 中的 HashMap 和 ConcurrentHashMap 全解析 今天发一篇”水文”,可能很多读者都会表示不理解,不过我想把它作为并发序列文章中不可缺少的一块来介绍.本来以为花不了 ...

  6. elasticsearch搭建并通过go-mysql-elasticsearch同步db数据达到搜索引擎的目的

    logstash-input-jdbc/elasticsearch-jdbc缺点:删除记录没有办法同步,只能两边执行自己的删除命令,版本16年后未更新. go-mysql-elasticsearch缺 ...

  7. 湖南省队集训 Day 2

    从这里开始 Problem A 走路 Problem B 游戏 Problem C 有趣的字符串题 暴力分又没骗满sad..... Problem A 走路 $O(n^2)$动态规划是显然的. 更新方 ...

  8. CEF 支持的命令行参数

    参考:https://peter.sh/experiments/chromium-command-line-switches/ List of Chromium Command Line Switch ...

  9. hdu2159 FATE----完全背包

    标准完全背包板子,动态方程为dp[j][x]=max(dp[j][x],dp[j-c[i]][x-1]+a[i]); 其中,dp[j][x]表示花费j点耐心杀x个怪所能得到的最大经验值. 具体代码如下 ...

  10. mysql基础篇(上篇)

    一.数据库 1.数据库介绍 2.RDBMS专业术语 3.MySQL数据库 4.常用数据库命令 1.数据库介绍 :什么是数据库 数据库就是按照数据结构来组织.存储和管理数据的仓库. 我们常常讲的数据库往 ...