<!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学习(四):条件渲染的更多相关文章

  1. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  2. Vue.js学习 Item7 -- 条件渲染与列表渲染

    v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...

  3. 关于vue.js中条件渲染的练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  4. Vue学习四:v-if及v-show指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...

  5. Vue 样式绑定 && 条件渲染

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  6. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  7. Vue 基础自查——条件渲染和列表渲染

    v-if和v-show的区别是什么? v-if和v-for为什么不能一起用? v-for中的key有什么作用? 1 v-if 和 v-show 1.1 作用 都用来控制元素的显示和隐藏 1.2 控制元 ...

  8. 3-6 Vue中的条件渲染

    本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...

  9. Vue指令之条件渲染

    1. v-show 根据表达式的真假值,切换元素的 display CSS属性.表达式为false时,p标签被赋予 style="display:none;" <p v-sh ...

  10. 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用

    一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图.    Store     ...

随机推荐

  1. (第七场)A Minimum Cost Perfect Matching 【位运算】

    题目链接:https://www.nowcoder.com/acm/contest/145/A A.Minimum Cost Perfect Matching You have a complete ...

  2. HashMap中的equals和hashCode

    HashMap的存储方式 HashMap的实现方式是数组链,不同的对象根据其哈希码(hashCode方法的返回值)找到对应的数组下标,然后存入数组.不同的对象有相同的哈希码时怎么办?这就由数组链中的链 ...

  3. win10 安装YII2

    YII2下载地址:http://www.yiichina.com/download 高级版本和基本版本的区别是: 基础版只有一个只有一个web应用,高级版则生成前后台.建议使用高级版,方便 Yii2框 ...

  4. 02_Linux 终端命令格式

    01. 终端命令格式 command [-options] [parameter] 说明: command:命令名,相应功能的英文单词或单词的缩写 [-options]:选项,可用来对命令进行控制,也 ...

  5. bitmap和drawable的相互转化以及setImageResource(),setImageDrawable(),setImageBitmap()

    从本地获取drawable图片:getResources().getDrawable(R.drawable.**) 获取bitmap:Bitmap b=BitmapFactory().decodeRe ...

  6. Java基础随笔

    1.一些简单的dos命令: –       d: 回车     盘符切换 –       dir(directory):列出当前目录下的文件以及文件夹 –       del:删除文件 –       ...

  7. Python函数中参数类型

    在学习Python函数的时候,函数本身的定义和调用并不是很复杂,但是函数的参数类型和用法的确有些复杂.在此做一个小结,加深理解. Python参数的定义 负责给函数提供一些必要的数据或信息,以保证函数 ...

  8. django-auth认证模块

    ########django-auth认证模块######## auth模块:它是django自带的用户认证模块,帮我们解决了登陆,注册,注销,修改密码 等等一系列的操作,封装成一个个方法,方便我们使 ...

  9. SpringBoot配置redis和分布式session-redis

    springboot项目 和传统项目 配置redis的区别,更加简单方便,在分布式系统中,解决sesssion共享问题,可以用spring session redis. 1.pom.xml <d ...

  10. jstl的<c:set 的问题

    在使用jstl提供的set标签对javabean进行处理的时候发现直接打bean的名字会错 <jsp:useBean id="kkk" class="com.log ...