<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
v-if 指令用于条件性地渲染一块内容。
这块内容只会在指令的表达式返回 true 值的时候被渲染。
-->
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<!--
无论值为t/f都会被渲染在页面中（注意渲染和显示的区别）
值为false，则元素不显示在页面中也不占位（可以在页面代码中找到该元素）
-->
<h1 v-show="ok1">Hello1!</h1>
<h1 v-show="ok2">Hello2!</h1>
<!-- 值为false则不会渲染在页面中（无法在页面代码中找到该元素） -->
<h1 v-if="ok">Hello!</h1>
<!--
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。
-->
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
type : "D",
ok : false,
ok1 : false,
ok2 : true
}
});
</script>
<style type="text/css">
h1{
width: 300px;
height: 100px;
}
</style>
</body>
</html>
前端学习日记Vue：v-if-else结构，v-if和v-show
最新推荐文章于 2024-05-11 05:24:02 发布
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
