Vue实例 动态组件实现选项卡
动态组件 选项卡
有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实例 动态组件实现选项卡的更多相关文章
- elementUI的动态tabs页的使用,vue的动态组件的操作
elementUI的动态tabs页的使用,vue的动态组件的操作 有时候我们需要用到动态的tab页,结合不同的页面内容来显示.这里是使用了elementUI的动态tabs页来实现的 <div c ...
- Vue.js动态组件
动态组件: 1.定义: 几个组件放在同一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. 2.动态切换原理: 在挂载点使用<component>标签,然后使用v-bind ...
- Vue实例与组件的关系
所有的 Vue 组件都是 Vue 实例,可以看成Vue组件就是Vue实例的扩展. <div id="app"> <child></child> ...
- vue实例之组件开发:图片轮播组件
一.普通方式: 其中,index是关键. <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- Vue 与 动态组件 import 的尝试
<template> <component :is='fuck' :data='data'></component> </template> <s ...
- vue动态组件切换(选项卡)
vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...
- Vue 动态组件、动画、插件
1 动态组件 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名 ...
- [js高手之路] vue系列教程 - 组件定义与使用上部(7)
组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...
- vue学习笔记(四)——Vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...
随机推荐
- xlrd模块-读取Execl表格
#xlrd模块 读取execl表格 import xlrd Execl = xlrd.open_workbook(r'Z:\Python学习\python26期视频\day76(allure参数.读e ...
- PHP正则表达式及表单注册案例
正则表达式是一种具有特定模式的用来匹配文本的字符串 preg_match 匹配 $pattern = '/php/'; $subject = "php 是最好的编程语言,php 没有之一!& ...
- 已经安装了 AccessDatabaseEngine.exe,还是报错
标题: SQL Server 导入和导出向导 ------------------------------ 操作无法完成. ------------------------------ 其他信息: 未 ...
- luogu P2158 [SDOI2008]仪仗队 (欧拉函数)
欧拉函数裸题 可惜我太久没做题忘了欧拉函数是什么了... 注意判断一下n = 1的情况就好了 #include <cstdio> using namespace std; ; typede ...
- VM中Linux网络设置(固定ip、连接外网开发环境)
在开发过程中,我们经常需要在linux中进行操作.毕竟服务器的系统大多数都是Linux,所以在dev环境需要配置好一台Linux系统配合开发. 在VMWare Workstation Pro中 ...
- 解决Oracle ORA-01033: ORACLE initialization or shutdown in progress错误 和 ORA-01589错误 要打开数据库则必须使用 RESETLOGS 或 NORESETLOGS 选项
要打开数据库则必须使用 RESETLOGS 或 NORESETLOGS 选项 SQL> startupORACLE 例程已经启动. Total System Global Area 13533 ...
- JS模板引擎-Mustache模板引擎使用实例1-表格树
1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...
- Selenium(Webdriver)自动化测试常问问题
http://blog.sina.com.cn/s/blog_c189e2590102w3bv.html Selenium(Webdriver)自动化测试常问问题 (1)selenium中如何保证操作 ...
- 17个IoC 软件包和项目
原文:17个IoC 软件包和项目 1.Autofac GitHub:https://github.com/autofac/Autofac 描述:An addictive .NET IoC contai ...
- 创建JDBC六个步骤
JDBC库中所包含的API通常与数据库使用于: 连接到数据库 创建SQL或MySQL语句 在数据库中执行SQL或MySQL查询 查看和修改数据库中的数据记录 创建JDBC应用程序 建立一个JDBC应用 ...