<!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切换
最新推荐文章于 2022-12-22 11:54:35 发布