指令：
v-if/v-else-if/v-else
v-if: 根据表达式真假生成或删除一个元素
当表达式的值为false时 v-if指令不会创建该元素 为true 才会创建该元素
v-show 不管表达式真假 都会创建 显示与否是通过 css display控制
如果 v-if需要控制多个元素的创建或删除 可以用 <template>元素包裹这些元素 然后在 template元素上使用
v-if 有更高的切换开销
v-show 有更高的初始渲染开销
需要非常频繁切换元素的显示和隐藏 使用 v-show 更好，运行时条件很少改变 使用v-if更好
v-if 实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<template v-if="!isLogin">
<form action="">
<p>username: <input type="text"></p>
<p>password: <input type="password"></p>
</form>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data(){
return {
isLogin:false
}
}
}).mount("#app");
</script>
</body>
</html>实例2：
<body>
<div id="app">
<h3 v-if="ok">冰箱</h3>
<h3 v-if="no">洗衣机</h3>
<h3 v-if="num>=100">库存很多</h3>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const vm = Vue.createApp({
data(){
return{
ok:true,
no:false,
num:1000
}
}
}).mount('#app');
</script>
</body>