vue tab切换demo
定义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的更多相关文章
- vue tab切换布局
页面 功能 点击tab1和tab2,content内容切换content1和content2 <template> <div> <div class="tab& ...
- vue tab切换
<template> <div class="box"> <ul> <li v-for="(item,index) in arr ...
- vue实现tab切换功能
最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...
- vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
- vue.cli实现tab切换效果
<template> <div class="cp-select"> <div class="lef ...
- vue + element-ui 制作tab切换(切换vue组件,踩坑总结)
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
- VUE 实现tab切换页面效果
一 163邮箱登录tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)
本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...
- vue实现tab切换
需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感 <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- [luoguP2736] “破锣摇滚”乐队 Raucous Rockers(DP)
传送门 f[i][j]表示前i首歌放到前j个盘里最多能放多首 ntr[i][j]表示i~j中最多能放进一张盘中多少首歌 ntr数组可以贪心预处理出来. #include <cstdio> ...
- [luoguP2982][USACO10FEB]慢下来Slowing down(dfs序 + 线段树)
传送门 这个题显然可以用树链剖分做. 然而线段树也能做. 每个点都对它的子树有贡献,所以先求一边 dfs序,然后直接在 dfs序 中搞 线段树 就行. ——代码 #include <cstdio ...
- leetcode之twosum
class Solution { public: vector<int> twoSum(vector<int>& nums, int target) { vector& ...
- Android应用的权限配置和权限列表
权限配置写在Mainifest.xml文件中: <?xml version="1.0" encoding="utf-8"?> <manifes ...
- JPos学习
基于JPos的消息交换系统 消息交换系统需求解读 消息交换系统不不是一个具体的业务系统,而是业务系统的运转的基础框架: 他的运转是体现在报文交换上的: 要定义一个可被不同业务系统使用的报文规范: 报文 ...
- Python基础教程笔记——第5章:条件,循环和其他语句
5.1 print和import的更多信息 1. print()3.0之后print不再是语句,而是函数, >>> print('udg',12,13) udg 12 13 &g ...
- 找了两个小时的错误,net.sf.json.JSONException: JSON keys cannot be null.
因为数据库里面一条记录插入的是NULL,所以导致报了net.sf.json.JSONException: JSON keys cannot be null,找了半天都找不出来问题所在,其他人又都可以启 ...
- SQL SERVER 2012 第四章 连接 JOIN の INNER JOIN
所有JOIN语句的共同点是:将一个记录与另外一个或多个记录匹配,从而生成一个新记录,这个记录是由两个记录的合并列所产生的一个超集. 内部连接: 内部连接语法结构:SELECT <select l ...
- nagios+logstash实时监控java日志(一)
https://blog.csdn.net/yanggd1987/article/details/64121459
- python学习之-- Mysql 基础知识
数据库介绍及MYSQL基础操作了解 关系型数据库(RDBMS)是按照数据结构来组织,存储和管理数据的仓库.特点:1:数据以表格的形式出现2:每行为各种记录名称3:每列为记录名称所对应的数据域4:许多的 ...