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 ...
随机推荐
- mysql安装下载
简单介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最 ...
- 【luogu P3390 矩阵快速幂】 模板
题目链接:https://www.luogu.org/problemnew/show/P3390 首先要明白矩阵乘法是什么 对于矩阵A m*p 与 B p*n 的矩阵 得到C m*n 的矩阵 矩阵 ...
- data-ng-show 指令
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- neo4j 安装步骤 转自:http://blog.csdn.net/luoluowushengmimi/article/details/19987995
1. Neo4j简介 Neo4j是一个用Java实现的.高性能的.NoSQL图形数据库.Neo4j 使用图(graph)相关的概念来描述数据模型,通过图中的节点和节点的关系来建模.Neo4j完全兼容A ...
- 怎么得到scrollTop
我们学习一个事件 : 页面滚动效果 window.onscroll = function() { 页面滚动语句 } 谷歌浏览器 和没有声明 DTD <DOCTYPE > : ...
- Java 依赖、关联、聚合和组合
必须转一个,写的太好了! https://blog.csdn.net/zhengzhb/article/details/7190158
- 看我如何使用IDEA引入GitHub上的Maven项目,从Clone到打开,图文步骤,你绝对看的懂!!
废话不多说,就一个字:干! 1.登录GitHub,复制项目仓库的地址 2.打开IDEA,选择git(三种方式选择) 第一种方式: 第二种方式: 第三种方式: 选择git后 3.下面是我改存放的目录 正 ...
- 配置Github秘钥
Git安装完成后,需要手动配置ssh密钥 配置github的ssh密钥: (1)打开Git Bash查看电脑上是否已经存在SSH密钥: 输入 cd ~/.ssh 若如上图显示无法找到该文件则要创建新的 ...
- WordPress博客插件程序:搜索下拉框openSug
百度搜索框下拉提示Wordpress组插件. 下载地址:https://www.opensug.org/faq/wp-content/uploads/2018/12/opensug.wordpress ...
- scrapy爬取伯乐在线文章数据
创建项目 切换到ArticleSpider目录下创建爬虫文件 设置settings.py爬虫协议为False 编写启动爬虫文件main.py