<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-if 和 v-show 指令可以用来控制元素的显示和隐藏;
v-if = '布尔值'
v-show = '布尔值'
布尔值为true元素显示,false 隐藏
区别:v-if 通过 dom 来控制元素的显示和隐藏
v-show 通过控制样式display:none 来控制好元素的显示和隐藏
使用场景区别:
1.涉及到大量dom 操作的时候,我们需要使用v-show
2.涉及到异步数据渲染的时候就要使用 v-if
-->
<p v-if='isVisible'>aaa</p>
<p v-show='isVisible'>bbb</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isVisible: true
}
})
</script>
</body>
</html>
<div id="app">
<p v-if="type==='a'">
a
</p>
<p v-else-if="type==='b'">
b
</p>
<p v-else-if="type==='c'">
c
</p>
<p v-else>
000
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
type: 'c'
}
})
</script>