v-if 有切換消耗高，重新刪除或創建元素
v-show 初始渲染消耗高，只切換了元素的 display:none，不會刪除和創建
建議：如果需要頻繁切換使用 v-show ，運行時條件改變可能性小使用 v-if
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/normalize.css">
<script src="../js/vue2.6.11.js"></script>
<style type="text/css">
button{
height: 40px;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<!-- 查看 元素是否被刪除 -->
<button v-if="ifFlag" @click="ifToggle">vif效果</button>
<button v-show="showFlag" @click="showToggle">vshow效果</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
ifFlag:true,
showFlag:true
},
methods:{
ifToggle(){
this.ifFlag = !this.ifFlag
},
showToggle(){
this.showFlag = !this.showFlag
}
}
});
</script>
</body>
</html>