这两天帮朋友写网站,刚好最近学习了vuejs,就试着用vue+bootstrap写了起来,编写过程中实践与理论结合的确学到很多东西,也遇到不少坎儿,不过通过百度以及官网等查资料找到了理想的解决方法,本来tab切换用实现的方法有很多种,也很简单,但是基于本人刚学习vuejs这块内容,感觉开始还是很吃力,在网上找了一些关于vuejs组件的博客,看了之后结合自己的理解,重新整理了下,不废话了直接上代码,请大牛们指导!
//template 模板
<template>
<div class="source">
<div class="tab-title">
<p @click="tabToggle(tab1)">tab1</p>
<p @click="tabToggle(tab2)">tab2</p>
<p @click="tabToggle(tab3Text)">tab3</p>
</div>
<div class="tabs">
<component :is='currentView' keep-alive></component>
</div>
</div>
</template>
//js部分
<script type="text/ecmascript-6">
import tab1 from '../tab/tab1'
import tab2 from '../tab/tab2'
import tab3 from '../tab/tab3'
export default {
data () {
return {
tab1: 'tab1',
tab2: 'tab2',
tab3: 'tab3',
currentView: 'tab1'
}
},
components: {
tab1,
tab2,
tab3
},
methods: {
tabToggle (tabText) {
this.currentView = tabText
}
}
}
</script>