<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果是v-if: 不会一直存在dom节点中,而是通过表达式的true/false创建/移除节点-->
<div v-if="show">{{msg}}</div>
<!-- 如果是v-show 会一直存在dom节点中,表达式的显示true/false是控制节点的display:block/none; 如果是频繁的显示隐藏,那么v-show的性能更好些-->
<div v-show="show">{{msg}}</div>
<!-- v-if条件判断语句,通过表达式的结果判断显示那一个dom节点,v-else必须在v-if节点后面,如果中间有元素会报错-->
<div v-if="sun">sun</div>
<div v-else>cloudy</div>
<!-- v-if,v-else-if语句,通过表达式的结果判断显示那一个dom节点,v-else必须在v-if节点后面,如果中间有元素会报-->
<div v-if="num==='1'">1</div>
<div v-else-if="num==='2'">2</div>
<div v-else="num==='3'">3</div>
<!-- 如果相同时切换多个元素,可以使用template元素包裹,显示的时候不会显示template元素 -->
<!-- 注意:v-show不支持template元素,也不支持v-else -->
<template v-if="show">
<div>111111</div>
<div>222222</div>
<div>333333</div>
</template>
<template v-else>
<div>4444</div>
<div>5555</div>
<div>6666</div>
</template>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
show: false,
msg: 'hello world',
sun: false,
num: 2
},
})
</script>
</body>
</html>