页面

功能

点击tab1和tab2,content内容切换content1和content2

 <template>
<div>
<div class="tab">
<div>tab1</div>
<div>tab2</div>
</div>
<div class="conten">
<content1 :contentlist1="list1"></content1>
<content2 :contentlist2="list2"></content2>
</div>
</div>
</template> <script>
import content1 from "XXXX"
import content2 from "XXXX"
export default {
name: "tab",
data() {
return {
list1: [],
list2: []
}
},
components: {
content1,
content2
}
};
</script>

vue tab切换布局的更多相关文章

  1. vue tab切换demo

    定义tab页面切换的内容 var app=new Vue({ el:'#app', data:{ navTabs:[ { text:"tab1", isActive:true, t ...

  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. 基于mpvue搭建小程序项目框架

    简介: mpvue框架对于从没有接触过小程序又要尝试小程序开发的人员来说,无疑是目前最好的选择.mpvue从底层支持 Vue.js 语法和构建工具体系,同时再结合相关UI组件库,便可以高效的实现小程序 ...

  2. selenium中的多窗口切换

    在selenium中,我们会遇到一些问题,就是多窗口处理的问题,我们爬取的内容在一个新窗口上,这个时候,我们就需要先切换到这个新的窗口上,然后进行抓取内容. 如何切换呢? 首先,获取当前窗口句柄 1. ...

  3. ZOJ 3329 One Person Game(概率DP,求期望)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3754 题目大意: 有三个骰子,分别有K1,K2,K3个面,一次投掷可以得到三个 ...

  4. edusoho迁移

    1.目录指向web,index文件设为app.php <VirtualHost *:8000> ServerAdmin abcd@mail.com DocumentRoot "E ...

  5. Java日期处理类的相关使用

    java常用类-java日期处理类 Date类 Date类是jdk给我们提高的标准日期类,在java.util包下: 示例代码: import java.util.Date; public class ...

  6. day33—前端开发的模块化和组件化

    转行学开发,代码100天——2018-04-18 今天是记录前端开发中模块化.组件化的知识.关于何为模块化,何为组件化以及为何要如此,目前还是处于一个只可意会不可言传的理解应用阶段. 当然,这样的存在 ...

  7. 《图解设计模式》读书笔记1-2 Adapter模式

    目录 Adapter即适配器,可以类比为将220V的电压的电源转为5V电压的手机充电器,起转换的作用. 明确概念: Adaptee:被适配者,即220v电压的电源 Adapter:适配器,即手机充电器 ...

  8. DELPHI之全局变量和局部变量

    http://www.cnblogs.com/Stwo/archive/2011/07/11/2102816.html DELPHI之全局变量和局部变量 全局变量: 如果我们在应用程序一个单元中的in ...

  9. java注解编程@since 1.8

    一.基本元注解: @Retention: 说明这个注解的生命周期 RetentionPolicy.SOURCE -> 保留在原码阶段,编译时忽略 RetentionPolicy.CLASS -& ...

  10. python3入门之基础语法

    Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色语法 ...