Vue学习(四):条件渲染
2024-10-20 04:05:58
<!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>
最新文章
- ASCII码而已
- C语言 &#183; 回文数 &#183; 基础练习
- java连接数据源-读取tomcat数据源配置
- Oracle错误 ORA-12560如何解决
- Maven初学
- LoadRunner执行自动化以及报告自动化的方法
- Android - 向服务器发送数据(POST) - HTTPClient.
- iCIBA简单案例
- [string]字符串中几个比较难的算法和容易搞混的题目
- perl学习(2) 基本数据类型等
- 【SSH 基金会】SSH框架--struts进一步的详细解释(两)
- iOS 数组字典操作
- iOS 之 alcatraz (插件管理器)
- es6中的class的使用
- Round #3
- 前端--vue框架
- rayleighchan实现瑞利多径衰落信
- PHP用curl发送get post put delete patch请求
- linux日志查找技巧
- DataTable的初始化与事件注册