Vue.js学习笔记 第三篇 条件渲染
条件选择
条件选择的用法和其他语言类似,一个例子就能解决所有问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-1">
<div v-if="number > 90">
{{ number }}分,牛逼
</div>
<div v-else-if="number > 60">
{{ number }}分,还行吧
</div>
<div v-else-if="number > 20">
{{ number }}分,要努力了
</div>
<div v-else>
{{ number }}分,废了
</div>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
number: Math.round(Math.random() * 100) //随机0到100的整数
}
})
</script>
</body>
</html>
随机出一个分数,将值赋给number,通过对number值的判断显示符合条件的内容
v-if与v-show
<div id="app-2">
<span v-if="isVisible">Hello, TanSea!</span>
<span v-show="isVisible">Hello, TanSea!</span>
</div>
<script type="text/javascript">
var vm2 = new Vue({
el: '#app-2',
data: {
isVisible: false
}
})
</script>
v-if与v-show在用法上是一样的,最终展示出来的结果也是一样的,区别在于
v-if:真实的条件渲染,在条件为假时什么也不做,有更高的切换消耗,适应于不怎么切换的场景
v-show:始终被编译并保留,只是简单的用CSS做切换,有更高的初始渲染消耗,适应于频繁切换的场景
Vue.js学习笔记 第三篇 条件渲染的更多相关文章
- Vue.js学习笔记 第四篇 列表渲染
遍历数组和对象 和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题 <!DOCTYPE html> <html> <head> <meta ch ...
- Vue学习笔记(三)条件渲染和循环渲染
目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...
- Vue.js学习笔记(三) - 修饰符
本篇将简单介绍常用的修饰符. 在上一篇中,介绍了 v-model 和 v-on 简单用法.除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现.通常都是在指令后面用小数点“.”连接修饰符名 ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- Vue.js学习笔记 第八篇 组件
全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- Vue.js学习笔记 第六篇 内置属性
computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- Vue.js学习笔记 第五篇 事件处理
监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
随机推荐
- 什么是 HTTPS
HTTPS (基于安全套接字层的超文本传输协议 或者是 HTTP over SSL) 是一个 Netscape 开发的 Web 协议. 你也可以说:HTTPS = HTTP + SSL HTTPS 在 ...
- VC++ 得到的函数地址与实际函数地址不一致的原因。
我想试验一个计算汇编指令长度的代码是否正确,因而写了如下code进行验证,但结果非常奇怪 #include <stdio.h> #include <Windows.h> int ...
- iOS学习笔记(九)——xml数据解析
在iPhone开发中,XML的解析有很多选择,iOS SDK提供了NSXMLParser和libxml2两个类库,另外还有很多第三方类库可选,例如TBXML.TouchXML.KissXML.Tiny ...
- using 关键字的使用
using 关键字的使用主要分为两种类型:using declaration(using 声明)和using directive(using 命令): using 声明:引入特定名称空间中的一个成员. ...
- 在前端眼中pc端和移动的开发区别
按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步, ...
- Martin Fowler’s Active Record design pattern.
P of EAA: Active Record https://www.martinfowler.com/eaaCatalog/activeRecord.html Active Record An o ...
- 亚马逊订单api重构 api异常入库 在php中执行python
https://docs.python.org/2/library/xml.etree.elementtree.html python 较 php能更高效第处理xml xpth php 扮演什么角 ...
- 批处理 ECHO命令输出空行
众所周知,如果echo后面跟一个环境变量,但是该变量却为空时,相当于不加任何参数的echo,即输出当前echo是on还是off.很多文章或者教程给出的解决方案都是在echo后面加一个点号echo.,这 ...
- 插叙LTE-2
LTE TDD与LTE FDD技术简介和比较 标签: 频分双工(FDD) 时分双工(TDD) LTE 摘要:UTRA 的长期演进(Long Term Evolution ,LTE) 技术存在LTE ...
- Python3.6全栈开发实例[008]
8.有如下变量(tu是个元祖),请实现要求的功能:tu = ("alex", [11, 22, {"k1": 'v1', "k2": [&q ...