Vue学习（四）：条件渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
</head>
<body>
<!--v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销-->
<!--如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好-->
<div id="example1">
<h2 v-if="type === 'A'">A</h2>
<h2 v-else-if="type === 'B'">B</h2>
<h2 v-else-if="type === 'C'">C</h2>
<h2 v-else>Not A/B/C</h2>
</div>
<div id="example2" v-show="ok">Hello Vue.</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>
let vm1 = new Vue({
el: '#example1',
data: {
type: 'B'
}
}); let vm2 = new Vue({
el: '#example2',
data: {
ok: true
}
})
</script>
</body>
</html>
Vue学习（四）：条件渲染的更多相关文章
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- Vue.js学习 Item7 -- 条件渲染与列表渲染
v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...
- 关于vue.js中条件渲染的练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- Vue学习四：v-if及v-show指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...
- Vue 样式绑定 && 条件渲染
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等
本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...
- Vue 基础自查——条件渲染和列表渲染
v-if和v-show的区别是什么? v-if和v-for为什么不能一起用? v-for中的key有什么作用? 1 v-if 和 v-show 1.1 作用 都用来控制元素的显示和隐藏 1.2 控制元 ...
- 3-6 Vue中的条件渲染
本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...
- Vue指令之条件渲染
1. v-show 根据表达式的真假值,切换元素的 display CSS属性.表达式为false时,p标签被赋予 style="display:none;" <p v-sh ...
- 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用
一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图. Store ...
随机推荐
- （第七场）A Minimum Cost Perfect Matching 【位运算】
题目链接:https://www.nowcoder.com/acm/contest/145/A A.Minimum Cost Perfect Matching You have a complete ...
- HashMap中的equals和hashCode
HashMap的存储方式 HashMap的实现方式是数组链,不同的对象根据其哈希码(hashCode方法的返回值)找到对应的数组下标,然后存入数组.不同的对象有相同的哈希码时怎么办?这就由数组链中的链 ...
- win10 安装YII2
YII2下载地址:http://www.yiichina.com/download 高级版本和基本版本的区别是: 基础版只有一个只有一个web应用,高级版则生成前后台.建议使用高级版,方便 Yii2框 ...
- 02_Linux 终端命令格式
01. 终端命令格式 command [-options] [parameter] 说明: command:命令名,相应功能的英文单词或单词的缩写 [-options]:选项,可用来对命令进行控制,也 ...
- bitmap和drawable的相互转化以及setImageResource(),setImageDrawable(),setImageBitmap()
从本地获取drawable图片:getResources().getDrawable(R.drawable.**) 获取bitmap:Bitmap b=BitmapFactory().decodeRe ...
- Java基础随笔
1.一些简单的dos命令: – d: 回车 盘符切换 – dir(directory):列出当前目录下的文件以及文件夹 – del:删除文件 – ...
- Python函数中参数类型
在学习Python函数的时候,函数本身的定义和调用并不是很复杂,但是函数的参数类型和用法的确有些复杂.在此做一个小结,加深理解. Python参数的定义 负责给函数提供一些必要的数据或信息,以保证函数 ...
- django-auth认证模块
########django-auth认证模块######## auth模块:它是django自带的用户认证模块,帮我们解决了登陆,注册,注销,修改密码 等等一系列的操作,封装成一个个方法,方便我们使 ...
- SpringBoot配置redis和分布式session-redis
springboot项目 和传统项目 配置redis的区别,更加简单方便,在分布式系统中,解决sesssion共享问题,可以用spring session redis. 1.pom.xml <d ...
- jstl的<c:set 的问题
在使用jstl提供的set标签对javabean进行处理的时候发现直接打bean的名字会错 <jsp:useBean id="kkk" class="com.log ...