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 ...
随机推荐
- 检查WIFI是否连接
查看网络连接 查看WiFi连接状态 (连接- -断开)
- 使用百度新闻RSS
function getbaidu() { $result=""; //RSS源地址列表数组 $rssfeed = array("http://news.baidu.co ...
- 表达式过滤器 lowercase
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 解决div+img布局下img下端出现空白的bug
1.将图片转换为块级对象 即设置img为“display:block;”.在本例中添加一组CSS代码:“#sub img {display:block;}”. 2.设置图片的垂直对齐方式 即设置图片的 ...
- 课时89.CSS三大特性练习（理解）
给大家补充一点:通配符是不参与权重计算的,因为通配符的权重是0,而权重只计算id,类,标签,将来还有一种,到后面说. 练习1 直接选中和间接选中的,必然要听直接选中的. 练习2 直接选中一共有两个,直 ...
- ABAP术语-Business Scenario
Business Scenario 原文:http://www.cnblogs.com/qiangsheng/archive/2008/01/12/1035980.html End-to-end co ...
- PC QQ客服代码
一. <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&am ...
- 汇编:采用址表的方法编写程序实现C程序的switch功能
//待实现的C程序 1 void main() { ; -) { : printf("excellence"); break; : printf("good") ...
- ubuntu多版本php切换
最近想要学习一下swoole,虽然机子上装的是php7.0,但是考虑到一些有关swoole的轮子要依赖更高版本(例如swooletw),所以就在机子上升级了php7.2,下面是在网上搜索或者自己折腾出 ...
- 【c学习-8】
/*继承结构体*/ #include // 定义子结构体 struct date{ int year; int month; int day; }; //定义父结构体 struct student{ ...