Vue入门笔记(二)--基础部分之条件渲染
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入门笔记(二)--基础部分之条件渲染的更多相关文章
- vue 自学笔记(4): 样式绑定与条件渲染
一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...
- 1 TensorFlow入门笔记之基础架构
------------------------------------ 写在开头:此文参照莫烦python教程(墙裂推荐!!!) ---------------------------------- ...
- C#快速入门笔记(1)——基础语法
C#快速入门笔记(1)——基础语法 总体框架:
- Vue入门(二)之数据绑定
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- 后端小白的VUE入门笔记, 前端高能慎入
因为项目需要前后端分离,后端竟然不用控制view层了,页面的跳转后端不再干涉,(前端的vue经过打包后成了一张index.html) 后端只需要响应给前端json串就ok,其实这不是爽歪歪?但是觉得还 ...
- VUE 入门笔记
前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...
- Vue入门笔记#数据绑定语法
#数据绑定语法# #文本: 数据绑定的基础表型形式,使用“Mustache”语法(双大括号)(特意查了一下Mustache同“moustache”释义为:髭:上唇的胡子,小胡子,最起码我觉得挺形象的) ...
- vue入门学习(基础篇)
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- vue学习笔记二:v-if和v-show的区别
v-if vs v-show v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做—— ...
随机推荐
- ldap认证jupyter notebook
虽然jupyter hub是支持ldap的,见ldapauthenticator: 但是登录成功后似乎要以登录用户名启动notebook,而登录用户在服务器上不存在,于是500了: 在服务器上通过pa ...
- JavaBean初识
JavaBean是一种特殊的java类,是一个通过Java代码实现的可重用组件. 简单来理解就是,将一些重用性较高的代码进行组合封装,以降低代码的重复性,使得开发更加简洁高效,也便于管理和修改. Ja ...
- java0425 wen IO
- Linux退出状态码
命令成功结束 一般性未知错误 不适合的shell命令 命令不可执行 没找到命令 无效的退出参数 +x 与Linux信号x相关的严重错误 通过Ctrl+C终止的命令 正常范围之外的退出状态码
- 解决 js ajax跨域访问报“No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误
参考页面:https://blog.csdn.net/idomyway/article/details/79572973 如果请求的是PHP页面: header("Access-Contro ...
- topcoder srm 600 div1
problem1 link 首先,如果一个数字的某一位是1但是$goal$的这一位不是1,那么这个数字是不用管它的.那么对于剩下的数字,只需要统计在$goal$为1的位上,这些数字对应位上也是1的数字 ...
- 分布式事物(同样适用于dubbo事务等分布式事务)
- TabLayout基本使用
前言 Tablayout继承自HorizontalScrollView,可以用作顶部标签效果.底部导航栏效果.一般多与ViewPager一起使用. 想直接了解如何实现短下滑效果的请看:TabLayou ...
- 【转】java线上程序排错经验2 - 线程堆栈分析
前言 在线上的程序中,我们可能经常会碰到程序卡死或者执行很慢的情况,这时候我们希望知道是代码哪里的问题,我们或许迫切希望得到代码运行到哪里了,是哪一步很慢,是否是进入了死循环,或者是否哪一段代码有问题 ...
- 【Git】Git使用记录: remove *.lock eg: index.lock/head.lock
问题 Another git process seems to be running in this repository, e.g. an editor opened by 'git commit' ...