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. 作业(更新ing)

    暴政警告 2019.4.19 1.YBT完成 7 道题目(1)广搜 3 道 (2)最短路 4 道 2.写至少 2 篇博客 (据说集中精力,一个上午/下午就能写完) 1.   一个 又一个 球细胞数目 ...

  2. 解决 flannel.1 interface state DOWN

    ip a 查看结果  flannel.1 i state UNKNOWN 并且五 inet 发现日志 device (flannel.1): state change: unmanaged -> ...

  3. Emote木马分析

    前言:网上找的样本是EXE的,没有邮件样本,所以只做了exe分析. 一.Emote木马相关信息 文件: C:\Users\Desktop\Samp.exe 大小: 249856 bytes 文件版本: ...

  4. 原博客地址http://blog.chinaunix.net/uid/20656672.html不再维护(10年前数百篇oracle/teradata性能优化、故障处理案例)

    原博客地址http://blog.chinaunix.net/uid/20656672.html不再维护(数百篇oracle/teradata性能优化.故障处理原创文章) 858871 top 500 ...

  5. 开启text汇聚排序

    开启text汇聚排序 curl -X PUT "http://192.168.1.136:19200/hxl_test/_mapping/tb_test" -H 'Content- ...

  6. 使用go-template自定义kubectl get输出

    kubectl get相关资源,默认输出为kubectl内置,一般我们也可以使用-o json或者-o yaml查看其完整的资源信息.但是很多时候,我们需要关心的信息并不全面,因此我们需要自定义输出的 ...

  7. Integer类toString(int i,int radix)方法

    Integer类toString(int i,int radix)方法: 首先抛出java的api中的介绍: public static String toString(int i, int radi ...

  8. TabLayout基本使用

    前言 Tablayout继承自HorizontalScrollView,可以用作顶部标签效果.底部导航栏效果.一般多与ViewPager一起使用. 想直接了解如何实现短下滑效果的请看:TabLayou ...

  9. C#多线程和线程池

    1.概念  1.0 线程的和进程的关系以及优缺点 windows系统是一个多线程的操作系统.一个程序至少有一个进程,一个进程至少有一个线程.进程是线程的容器,一个C#客户端程序开始于一个单独的线程,C ...

  10. C语言-第5次作业

    1.本章学习总结 1.1思维导图 1.2 本章学习体会及代码量学习体会 1.2.1学习体会 感受:和数组一样,这又是一个非常陌生的知识点--指针,刚刚开始学习的时候,被陌生的各种赋值方式搞得眼花缭乱, ...