一、控制元素的显示和隐藏
v-if可以单独使用，而v-else-if和v-else必须跟在v-if的后面，一起使用才行
二、直接看代码，一看就明白了
- 当前界面上会显示 “我是美女”
- 如果把app.sex='帅哥'，则会显示 “我是帅哥”
- 那如果把app.sex='第三人称'，则会显示 “你猜我是谁”
- 如果不是上面的三个值，就会显示 “我已成仙”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的内置指令--条件渲染（v-if,v-else-if,v-else）</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="sex=='美女'">我是美女</p>
<p v-else-if="sex=='帅哥'">我是帅哥</p>
<p v-else-if="sex=='第三人称'">你猜我是谁</p>
<p v-else="xianshi">我已成仙</p>
</div>
<script>
new Vue({
el: '#app',
data: {
sex: '美女'
}
})
</script>
</body>
</html>