动态组件 选项卡

有n种实现方法 哈哈哈哈

<style>
#app{
width: 260px;
height: 200px;
background: #fff;
box-shadow: 0 0 10px #ccc;
margin:0 auto;
margin-top: 20%;
}
ul{ margin: 0; padding: 0; display: flex; flex-direction: row;}
ul li{
list-style: none;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
flex: 1;
}
ul li:hover{
color: #00D2FD;
}
ul li.active{
border-bottom: 2px solid #00D2FD;
color: #00D2FD;
}
.content{
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li
v-for="(tab, index) in list"
v-bind:class="{active: active === index}"
v-on:click="toggleTab(index)"
>{{tab}}</li>
</ul>
<components class="content" :is="currentTab"></components>
</div>
<script>
var itema = {
template: "<p>Vue 学完就可以找工作了哦</p>"
}
var itemb = {
template: "<p>深入理解JS怎么就这么的难呢 fuck</p>"
}
var itemc = {
template: "<p>PHP有时间一定要去学</p>"
}
new Vue({
el: '#app',
components: {
itema,
itemb,
itemc
},
data: {
list: ['Vue', 'JS', 'PHP'],
coms: ['itema', 'itemb', 'itemc'],
currentTab: 'itema',
active: 0
},
methods: {
toggleTab (tab) {
this.currentTab = this.coms[tab];
this.active = tab;
}
}
})
</script>

Vue实例 动态组件实现选项卡的更多相关文章

  1. elementUI的动态tabs页的使用,vue的动态组件的操作

    elementUI的动态tabs页的使用,vue的动态组件的操作 有时候我们需要用到动态的tab页,结合不同的页面内容来显示.这里是使用了elementUI的动态tabs页来实现的 <div c ...

  2. Vue.js动态组件

    动态组件: 1.定义: 几个组件放在同一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. 2.动态切换原理: 在挂载点使用<component>标签,然后使用v-bind ...

  3. Vue实例与组件的关系

    所有的 Vue 组件都是 Vue 实例,可以看成Vue组件就是Vue实例的扩展. <div id="app"> <child></child> ...

  4. vue实例之组件开发:图片轮播组件

    一.普通方式: 其中,index是关键. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. Vue 与 动态组件 import 的尝试

    <template> <component :is='fuck' :data='data'></component> </template> <s ...

  6. vue动态组件切换(选项卡)

    vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...

  7. Vue 动态组件、动画、插件

    1 动态组件 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名 ...

  8. [js高手之路] vue系列教程 - 组件定义与使用上部(7)

    组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...

  9. vue学习笔记(四)——Vue实例以及生命周期

    1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) |   |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...

随机推荐

  1. xlrd模块-读取Execl表格

    #xlrd模块 读取execl表格 import xlrd Execl = xlrd.open_workbook(r'Z:\Python学习\python26期视频\day76(allure参数.读e ...

  2. PHP正则表达式及表单注册案例

    正则表达式是一种具有特定模式的用来匹配文本的字符串 preg_match 匹配 $pattern = '/php/'; $subject = "php 是最好的编程语言,php 没有之一!& ...

  3. 已经安装了 AccessDatabaseEngine.exe,还是报错

    标题: SQL Server 导入和导出向导 ------------------------------ 操作无法完成. ------------------------------ 其他信息: 未 ...

  4. luogu P2158 [SDOI2008]仪仗队 (欧拉函数)

    欧拉函数裸题 可惜我太久没做题忘了欧拉函数是什么了... 注意判断一下n = 1的情况就好了 #include <cstdio> using namespace std; ; typede ...

  5. VM中Linux网络设置(固定ip、连接外网开发环境)

      在开发过程中,我们经常需要在linux中进行操作.毕竟服务器的系统大多数都是Linux,所以在dev环境需要配置好一台Linux系统配合开发.   在VMWare Workstation Pro中 ...

  6. 解决Oracle ORA-01033: ORACLE initialization or shutdown in progress错误 和 ORA-01589错误 要打开数据库则必须使用 RESETLOGS 或 NORESETLOGS 选项

    要打开数据库则必须使用 RESETLOGS 或 NORESETLOGS 选项 SQL> startupORACLE 例程已经启动. Total System Global Area  13533 ...

  7. JS模板引擎-Mustache模板引擎使用实例1-表格树

    1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...

  8. Selenium(Webdriver)自动化测试常问问题

    http://blog.sina.com.cn/s/blog_c189e2590102w3bv.html Selenium(Webdriver)自动化测试常问问题 (1)selenium中如何保证操作 ...

  9. 17个IoC 软件包和项目

    原文:17个IoC 软件包和项目 1.Autofac GitHub:https://github.com/autofac/Autofac 描述:An addictive .NET IoC contai ...

  10. 创建JDBC六个步骤

    JDBC库中所包含的API通常与数据库使用于: 连接到数据库 创建SQL或MySQL语句 在数据库中执行SQL或MySQL查询 查看和修改数据库中的数据记录 创建JDBC应用程序 建立一个JDBC应用 ...