vue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.pink {
background-color: pink;
}
</style>
</head>
<body>
<!-- v-if 能够控制元素的显示与隐藏 -->
<!-- v-else -->
<!-- v-else-if -->
<!-- v-show 能够控制元素的显示与隐藏 -->
<!-- 区别 -->
<!-- 1. v-if控制的dom的移除/添加,v-show控制dom的样式显示与隐藏(display) -->
<!-- 频繁的切换显示/隐藏要使用v-show -->
<!-- 只判断一次时,使用v-if -->
<!-- 2. v-if可以写在template上,v-show不行,写了也没用 -->
<div id="app">
<button @click="handleClick">{{ text }}</button>
<!-- <div class="box red" v-if="num === 0"></div>
<div class="box pink" v-else-if="num === 1"></div>
<div class="box blue" v-else></div> -->
<!-- <div class="box red" v-if="show"></div> -->
<!-- <div class="box pink" v-if="show"></div> -->
<template v-show="show">
<div class="box red"></div>
<div class="box pink"></div>
</template>
<!-- <div class="box pink" v-show="show"></div> -->
<!-- <div class="box red" v-if="show"></div> -->
</div>
<script>
// if(true) {
// } else if(false) {}
// else {
// }
const vm = new Vue({
el: '#app',
data: {
show: true,
text: '隐藏',
num: 0
},
methods: {
handleClick() {
this.show = !this.show;
this.text = this.show ? '隐藏' : '显示';
}
}
})
</script>
</body>
</html>