v-if是完全不显示DOM，v-show是调整display属性
需要频繁切换用v-show
v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
<h3 v-if="tab == 1">首页</h3>
<h3 v-else-if="tab == 2">新闻</h3>
<h3 v-else>个人</h3>
<button @click="tabChange" data-id="1">首页</button>
<button @click="tabChange" data-id="2">新闻</button>
<button @click="tabChange" data-id="3">个人</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
tab:1
},
methods:{
tabChange:function(e){
this.tab = e.target.dataset.id
}
}
})
</script>
</html>
v-show
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
<h3 v-show="tab == 1">首页</h3>
<h3 v-show="tab == 2">新闻</h3>
<h3 v-show="tab == 3">个人</h3>
<button @click="tabChange" data-id="1">首页</button>
<button @click="tabChange" data-id="2">新闻</button>
<button @click="tabChange" data-id="3">个人</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
tab:1
},
methods:{
tabChange:function(e){
this.tab = e.target.dataset.id
}
}
})
</script>
</html>