动态组件 选项卡

有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. ACM-ICPC 2018 焦作赛区网络预赛 Give Candies 题解

    ACM-ICPC 2018 焦作赛区网络预赛 Give Candies n个糖果分给n个小朋友 从1到n个小朋友依次给,每次随机给个数,至少一个,知道没有糖果为止. 问糖果的分布情况方案数. 输出方案 ...

  2. MongoDB批量更新和批量插入的方式

    最近,在调试代码中发现向MongoDB插入或者更新文档记录时若是多条的话都是采用for循环操作的,这样的处理方式会造成数据操作耗时,不符合批量处理的原则:对此,个人整理了一下有关MongoDB的批量更 ...

  3. python:利用smtplib发送邮件详解

    本文转自:https://www.cnblogs.com/insane-Mr-Li/p/9121619.html 自动化测试中,测试报告一般都需要发送给相关的人员,比较有效的一个方法是每次执行完测试用 ...

  4. MySQL的DML语言(增删改)

    MySQL的DML语言(增删改) 补充说明,外键:不要使用外键,一切外键概念都在应用层解决. 补充说明,数据库的列,也就是字段名,尽量带上飘符号` 数据库存在的意义:数据存储和数据管理. 数据库:行( ...

  5. 申请一个美国paypal账户

    近期为了做PayPal支付,进口demo已经写好,就差一个美国PayPal账户进行支付测试,几经折腾,终于申请下来,附上参考链接:   paypal官网: https://www.paypal.com ...

  6. Redis 数据库使用和搭建

    1.redis中文网 http://www.redis.cn/documentation.html 2.数据类型介绍 http://redis.cn/topics/data-types-intro.h ...

  7. redis 列表类型list

    列表类型(list)1.插入 左侧插入 :lpush key value1 value2 value3... 右侧插入: lpush key value1 value2 value3... 在指定元素 ...

  8. Web安全测试学习笔记 - 文件包含

    基础知识 文件包含指的是一个文件动态引用另一个文件,这是一种非常灵活的动态调用方式.有点类似Java引用jar包,但区别在于jar包引用后一般是固定不变的(一般不能动态改变所引用的jar包名称),而文 ...

  9. SpringBoot 测试基类

    每次写单元测试都要重复写一些方法.注解等,这里我写了一下测试的基类 (1) 记录测试方法运行的时间 (2)两个父类方法 print,可打印list和object对象 (3)一个属性 logger 记录 ...

  10. 洛谷P1086 花生采摘

    https://www.luogu.org/problem/P1086 #include <bits/stdc++.h> using namespace std; typedef long ...