定义tab页面切换的内容

var app=new Vue({

el:'#app',

data:{

navTabs:[
{
text:"tab1",
isActive:true,
tabContent:'this is tab1 content'
},
{
text:"tab2",
isActive:false,
tabContent:'this is tab2 content'
},
{
text:"tab3",
isActive:false,
tabContent:'this is tab3 content'
},
] } });

定义组件

/*tabTitle的组件*/
Vue.component('tab-title',{
props:['title'],
template:'<li v-on:click="$emit(\'change\')">{{title}}</li>'
})
/*tabContent的组件*/
Vue.component('tab-content',{
props:['content'],
template:'<div>{{content}}</div>'
})

使用

<ul class="navTab">
<li v-for="(navTab,index) in navTabs" is="tab-title" v-bind:class="{active:navTab.isActive}"
v-on:change="switchTab(index)" v-bind:title="navTab.text"></li>
</ul>
<div class="tabContent">
<div v-for="tabContent in navTabs" v-if="tabContent.isActive" is="tab-content" v-bind:content="tabContent.tabContent"></div>
</div>

vue tab切换demo的更多相关文章

  1. vue tab切换布局

    页面 功能 点击tab1和tab2,content内容切换content1和content2 <template> <div> <div class="tab& ...

  2. vue tab切换

    <template> <div class="box"> <ul> <li v-for="(item,index) in arr ...

  3. vue实现tab切换功能

    最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...

  4. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  5. vue.cli实现tab切换效果

    <template> <div class="cp-select">                     <div class="lef ...

  6. vue + element-ui 制作tab切换(切换vue组件,踩坑总结)

    本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...

  7. VUE 实现tab切换页面效果

    一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  8. vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)

    本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...

  9. vue实现tab切换

    需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. [luoguP2736] “破锣摇滚”乐队 Raucous Rockers(DP)

    传送门 f[i][j]表示前i首歌放到前j个盘里最多能放多首 ntr[i][j]表示i~j中最多能放进一张盘中多少首歌 ntr数组可以贪心预处理出来. #include <cstdio> ...

  2. [luoguP2982][USACO10FEB]慢下来Slowing down(dfs序 + 线段树)

    传送门 这个题显然可以用树链剖分做. 然而线段树也能做. 每个点都对它的子树有贡献,所以先求一边 dfs序,然后直接在 dfs序 中搞 线段树 就行. ——代码 #include <cstdio ...

  3. leetcode之twosum

    class Solution { public: vector<int> twoSum(vector<int>& nums, int target) { vector& ...

  4. Android应用的权限配置和权限列表

    权限配置写在Mainifest.xml文件中: <?xml version="1.0" encoding="utf-8"?> <manifes ...

  5. JPos学习

    基于JPos的消息交换系统 消息交换系统需求解读 消息交换系统不不是一个具体的业务系统,而是业务系统的运转的基础框架: 他的运转是体现在报文交换上的: 要定义一个可被不同业务系统使用的报文规范: 报文 ...

  6. Python基础教程笔记——第5章:条件,循环和其他语句

    5.1 print和import的更多信息 1. print()3.0之后print不再是语句,而是函数, >>> print('udg',12,13)   udg 12 13 &g ...

  7. 找了两个小时的错误,net.sf.json.JSONException: JSON keys cannot be null.

    因为数据库里面一条记录插入的是NULL,所以导致报了net.sf.json.JSONException: JSON keys cannot be null,找了半天都找不出来问题所在,其他人又都可以启 ...

  8. SQL SERVER 2012 第四章 连接 JOIN の INNER JOIN

    所有JOIN语句的共同点是:将一个记录与另外一个或多个记录匹配,从而生成一个新记录,这个记录是由两个记录的合并列所产生的一个超集. 内部连接: 内部连接语法结构:SELECT <select l ...

  9. nagios+logstash实时监控java日志(一)

    https://blog.csdn.net/yanggd1987/article/details/64121459

  10. python学习之-- Mysql 基础知识

    数据库介绍及MYSQL基础操作了解 关系型数据库(RDBMS)是按照数据结构来组织,存储和管理数据的仓库.特点:1:数据以表格的形式出现2:每行为各种记录名称3:每列为记录名称所对应的数据域4:许多的 ...