在Vue进行前端开发中，条件判断主要用于根据不同的条件来决定显示或隐藏，或者进行视图之间的切换，本文以一个简单的小例子简述v-if的常见用法，仅供学习分享使用，如有不足之处，还请指正。

v-if 指令

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 可以用 v-else 添加一个“else 块”,也可以不用。v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

如下所示：如果isgood为true，则显示【Vue is good!】否则显示【Oh no】。

 <h3 v-if="isgood">Vue is good!</h3>

 <h3 v-else>Oh no 												


											
一起学Vue之条件判断的更多相关文章
	

    
								
  1. vue    v-if条件判断
		
    <view class='circle-G' v-if="item.status === 'G'"></view> <view class='circ ...
    
		
    2. 
						
  2. vue学习笔记（二）-  数据绑定、列表渲染、条件判断
		
    vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...
    
		
    3. 
						
  3. vue数据渲染、条件判断及列表循环
		
    1.数据渲染  {{msg}} <template> <div id="app"> {{msg}} </div> </template&g ...
    
		
    4. 
						
  4. 我们一起来学Shell - shell的条件判断
		
    文章目录 Shell 条件测试语法 符号说明 Shell 测试表达式 文件测试表达式 字符串测试表达式 整数操作符 逻辑操作符 测试表达式的区别总结 Shell 条件判断之if语句 单分支 IF 条件 ...
    
		
    5. 
						
  5. 『忘了再学』Shell流程控制 — 33、if条件判断语句（一）
		
    目录 1.单分支if条件语句 2.双分支if条件语句 (1)示例1 (2)示例2 什么是流程控制? 普通理解:Shell编写的程序是顺序执行的,也就是说第一命令先执行,然后接着执行第二条命令,然后再下 ...
    
		
    6. 
						
  6. 『忘了再学』Shell流程控制 — 34、if条件判断语句（二）
		
    目录 1.多分支if条件语句格式 2.练习 3.说明 4.综合练习 1.多分支if条件语句格式 if [ 条件判断式1 ] then 当条件判断式1成立时,执行程序1 elif [ 条件判断式2 ]  ...
    
		
    7. 
						
  7. 在Less中使用条件判断
		
    好几个月都没写点什么东西了,被外派到Gov开发项目,老旧的系统让开发痛苦不堪,接口文档甚至是2011年的,感觉这几个月的时间都被浪费在做兼容处理上了,并且没学到什么东西,心里挺不是滋味.回到公司后才知 ...
    
		
    8. 
						
  8. 一起学Vue之入门篇
		
    概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
    
		
    9. 
						
  9. [Vue源码]一起来学Vue模板编译原理(一)-Template生成AST
		
    本文我们一起通过学习Vue模板编译原理(一)-Template生成AST来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vu ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. day04_IDEA、方法
			
    day04_IDEA.方法 1.快捷输入 psvm:public static void main(String[] args){ } sout:System.out.print("&quo ...
    
			
    2. 
						
  2. Maven 项目无法在Ecplise加进tomcat server
			
    当把用Maven项目 加进 tomcat server 时,出现 "There are no resources that can be added or removed from the  ...
    
			
    3. 
						
  3. Gloang Swagger
			
    功能 自动化生产接口文档 安装 # 安装swaggo get -u github.com/swaggo/swag/cmd/swag # 安装 gin-swagger go get -u github. ...
    
			
    4. 
						
  4. 再问你一遍，你真的了解try..catch(finally)吗？？?
			
    定义 首先来看下 MDN 的定义: The try...catch statement marks a block of statements to try and specifies a respo ...
    
			
    5. 
						
  5. ELK搭建（docker环境）
			
    ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心套件,但并非全部. Elasticsearch是实时全文搜索和分析引擎,提供搜集.分析.存储数据三大功能:是一套开 ...
    
			
    6. 
						
  6. 深入JVM垃圾回收机制，值得你收藏
			
    JVM可以说是为了Java开发人员屏蔽了很多复杂性,让Java开发的变的更加简单,让开发人员更加关注业务而不必关心底层技术细节,这些复杂性包括内存管理,垃圾回收,跨平台等,今天我们主要看看JVM的垃圾 ...
    
			
    7. 
						
  7. Shiro过滤器
			
    Shiro内置过滤器 anon.authBasic.authc.user.logout perms.roles.ssl.port spring.xml <bean id="shiroF ...
    
			
    8. 
						
  8. drf路由分发、解析/渲染模块配置、使用admin、自动序列化配置
			
    目录 drf路由分发配置 解析模块配置 渲染模块配置 浏览器渲染打开 浏览器渲染关闭 结论 drf使用后台admin drf序列化模块 serializers.py: views.py:单查群查 测试 ...
    
			
    9. 
						
  9. 面试官：“看你简历上写熟悉 Handler 机制，那聊聊 IdleHandler 吧？”
			
    一. 序 Handler 机制算是 Android 基本功,面试常客.但现在面试,多数已经不会直接让你讲讲 Handler 的机制,Looper 是如何循环的,MessageQueue 是如何管理 M ...
    
			
    10. 
						
  10. 《C# GDI+ 破境之道》：第一境 GDI+基础 —— 第二节：画矩形
			
    有了上一节画线的基础,画矩形的各种边线就特别好理解了,所以,本节在矩形边线上,就不做过多的讲解了,关注一下画“随机矩形”的具体实现就好.与画线相比较,画矩形稍微复杂的一点就是在于它多了很多填充的样式. ...
    
			
    11.