页面

功能

点击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. (1)消灭初级程序员常用的多层if-else嵌套--------------【表驱动法】

    表驱动法 1.相信很多刚从事工作的程序员或一些初级程序员在写代码的时候会出现对一些逻辑判断写成多层if-else嵌套的经历,这种方式在一些简单的层次中运用起来确实可行,但对于一些大型项目逻辑判断比较多 ...

  2. UVA 1045 最长公共子序列

    题目描述:求最长公共子序列 若给定序列X={x1,x2,...,xm},另一序列Z={z1,z2,...,zk},是X的子序列是指存在一个严格递增的下标序列{i1,i2,...,ik}使得对所以j=1 ...

  3. Mac自带服务器的应用

    Mac OS下自带了apache,方便部署一些静态数据(html,css,js,xml,图片等数据) 一.系统默认路径 系统默认是隐藏apache安装目录的,但我们可以通过“命令行”或者“文件夹前往” ...

  4. Nodejs - 交互式管理 Node.js 版本

    n - npm:Interactively Manage Your Node.js Versions. Unfortunately n is not supported on Windows. npm ...

  5. css样式表的理解

    全拼Cascading Style Sheete 美化html网页 1分为 内联样式表 和html联合显示 内嵌样式表 在单独区域内嵌,必须在head 外部样式表 需建一个css文件,保存并附加 2选 ...

  6. 002-JS-SDK开发使用,网页获取授权,扫一扫调用

    一.概述 在申请响应的公众号之后,实名认证或者企业认证之后,可以进行对应开发 二.开发步骤 2.1.开发前提[服务号]-域名设置 登录后台之后→左侧设置→公众号设置→功能设置,设置好“JS接口安全域名 ...

  7. PostgreSQL 在视频、图片去重,图像搜索业务中的应用

    摘要: PostgreSQL 在视频.图片去重,图像搜索业务中的应用作者digoal日期2016-11-26标签PostgreSQL , Haar wavelet , 图像搜索 , 图片去重 , 视频 ...

  8. Unity 指定参数

    构造函数参数初始化 InjectionConstructor IContainer.RegisterType<T, Class>(new InjectionConstructor(&quo ...

  9. Vue动态添加响应式属性

    不能给Vue实例.Vue实例的根数据对象添加属性. 文件 <template> <div id="app"> <h2>{{hello}}:{{a ...

  10. _exit和exit的区别

    在linux的标准库函数中,有一套称作高级I/O的函数,我们熟知的printf .fopen .fread .fwrite都在此列,他们也被称作缓冲I/O.其特征是对应每一个打开的文件,都存在一个缓冲 ...