Vue.js入门(5)

  • 时间:2018-07-21 23:31 作者:谷雨cxxss 来源:谷雨cxxss 阅读:173
  • 扫一扫,手机访问
摘要:详情动态组件的一个小例子,jsfiddle上的。css:.tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1px solid #ccc; cursor
Vue.js入门(5)

Vue.js入门(5)

详情动态组件的一个小例子,jsfiddle上的。


css:

.tab-button {

padding: 6px 10px;

border-top-left-radius: 3px;

border-top-right-radius: 3px;

border: 1px solid #ccc;

cursor: pointer;

background: #f0f0f0;

margin-bottom: -1px;

margin-right: -1px;

}

.tab-button:hover {

background: #e0e0e0;

}

.tab-button.active {

background: #e0e0e0;

}

.tab {

border: 1px solid #ccc;

padding: 10px;

}

HTML:

v-for="tab in tabs"

v-bind:key="tab.name"

v-bind:class="['tab-button', { active: currentTab.name === tab.name }]"

v-on:click="currentTab = tab"

>{{ tab.name }}

v-bind:is="currentTab.component"

class="tab"

>

pure JS:

var tabs = [

{

name: 'Home',

component: {

template: '

Home component
'

}

},

{

name: 'Posts',

component: {

template: '

Posts component
'

}

},

{

name: 'Archive',

component: {

template: '

Archive component
',

}

}

]

new Vue({

el: '#dynamic-component-demo',

data: {

tabs: tabs,

currentTab: tabs[0]

}

})


但我觉得这个有点为了详情动态组件而写的,以下是我改写的,比较容易懂。css都一样的。


HTML:

v-for="tab in tabs"

v-bind:tab_title="tab.tab_title"

v-bind:key="tab.id"

v-bind:class="['tab-button', { active: currentTabId === tab.id }]"

v-on:change="change(tab.id)"

>

v-bind:tab_content="tabs[currentTabId].tab_content"

class="tab"

>

pure JS:

Vue.component(

'tab_title',{

props:['tab_title'],

template:''

})

Vue.component(

'tab_content',{

props:['tab_content'],

template:'

{{ tab_content }}
'

})

new Vue({

el: '#dynamic-component-demo',

data:

{

tabs:[

{id:0,tab_title:'Home',tab_content:'Home component'},

{id:1,tab_title:'Posts',tab_content:'Posts component'},

{id:2,tab_title:'Archive',tab_content:'Archive component'}

],

currentTabId:0

},

methods:{

change:function(id){

this.currentTabId=id;

}

}

})

  • 全部评论(0)
最新发布的资讯信息
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
【系统环境|windows】初识webRTC(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部