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 也是惰性的:如果在初始渲染时条件为假,则什么也不做—— ...
随机推荐
- zigbee 中ZDO的理解
---恢复内容开始--- ZigBee 物理层:主要进行无线数据的收发,同时定义了无线传输的信道以及频率. MAC层:使用CSMA-CA机制接入到无线信道,负责传输信标帧,保持同步和 ...
- 基于ROS的运动识别
#!/usr/bin/env python # -*- coding: utf-8 -*- import rospy import cv2 import numpy as np from sensor ...
- MyBatis笔记(二) 最简单的insert命令
接上一篇随笔.这里没有用到MyBatis最关键的映射器接口,因此只做个简单的insert操作,update和delete同理,就不再赘述了. 直接上代码: 首先是dao包下的UserDAO.java文 ...
- Java线程基础(二)
今天上午考完了计算机二级,也算卸掉了一个大包袱吧,希望能过!(其实也就考着玩的,不来点考试就要发霉了) 好了,趁着难得的考后休息时间我就接着上一次没写完的继续更新吧. 上一篇文章——>Java核 ...
- JAVA监听器Listener
JAVA监听器Listener 一. 简介 监听器用于对web中内置对象的状态或者属性变化进行监听并做出相应响应的一种Servlet;在内置对象的生命周期中,产生.销毁等状态发生变化时,监听器就会进行 ...
- 深度学习网络中numpy多维数组的说明
目前在计算机视觉中应用的数组维度最多有四维,可以表示为 (Batch_size, Row, Column, Channel) 以下将要从二维数组到四维数组进行代码的简单说明: Tips: 1) 在nu ...
- Redhat终端中文乱码解决
文件中的中文以及命令反馈的中文能够正常显示,但是在终端中用ls等命令查看文件时会出现乱码. 我在i18n文件中加了下面两行内容(本来只有第一行),后来就能正常显示了.
- vue引入JQ的方法
在vue中引入jq 用vue-cli脚手架工具构建项目成功后 当需要引入JQ,可用以下方法: 1.首先在package.json里的 dependencies加入"jquery" ...
- Vue-admin工作整理(十): Vuex-Actions(模拟接口请求实现组件字段更新)
思路:通过提交一个 mutation,而不是直接变更状态,它可以包括异步操作,通过请求接口,定义一个方法,第一个参数为对象,在里面能够提取到一些东西,比如:commit,这是一个方法,调用这个comm ...
- [原][译]我们为什么需要另一个c++测试框架?Catch||Why do we need yet another C++ test framework?
翻译问题来源:https://github.com/catchorg/Catch2/blob/master/docs/why-catch.md 其他辅助博文:从Google Test 转到 Catch ...