<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="tab">
<button v-for="item in items" @click="cur = item">{{item}}</button>
<!--就是用到下面这句，绑定is，用计算属性改变currentComponent的值，这个值就是组件名-->
<component :is="currentComponent"></component>
</div>
<script>
Vue.component('tab-Home',{
template:'<h1>Home Home Home</h1>'
});
Vue.component('tab-Second',{
template:'<h1>Second Second Second</h1>'
});
Vue.component('tab-Third',{
template:'<h1>Third Third Third</h1>'
});
new Vue({
el:'#tab',
data:{
cur:'Home',
items:['Home','Second','Third']
},
computed:{
currentComponent:function () {
return 'tab-'+ this.cur;
}
}
})
</script>
</body>
</html>vue 组件tab切换
猜你喜欢
转载自blog.csdn.net/qq_40285497/article/details/81545934
今日推荐
周排行