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 ...
随机推荐
- Javascript的重要数据类型-对象
这次的分享,主要还是想跟大家聊聊Javascript语言中很重要的概念之一,对象.为什么说之一呢?因为Javascript其他重要概念还包括:作用域 作用域链 继承 闭包 函数 继承 数组 ..... ...
- java学习笔记之集合—ArrayList源码解析
1.ArrayList简介 ArrayList是一个数组队列,与java中的数组的容量固定不同,它可以动态的实现容量的增涨.所以ArrayList也叫动态数组.当我们知道有多少个数据元素的时候,我们用 ...
- spring框架中用到了哪些设计模式
1.代理模式:在AOP和remoting中被用的比较多 2.单例模式:在spring配置文件中定义的bean默认为单例模式 3.模板方法模式:解决代码重复问题 4.前端控制器模式:spring提供了D ...
- 删除Eclipse中的SVN账号信息-SVN切换用户
在eclipse中经常用到用svn进行代码版本控制,为了提交或更新代码的时候不反复地提示我们输入用户名和密码,于是我们就习惯把访问SVN的用户名密码自动保存起来. 以便下次自动使用,不要再次手工多次输 ...
- Docker之设置加速器
在Docker从仓库下载镜像是非常慢的,所以今天搞一个Docker设置加速器教程. 1. 创建一个Docker的配置文件. sudo vim /etc/docker/daemon.json 2. 编写 ...
- jQuery---jQuery对象与DOM对象的区别
jQuery对象与DOM对象的区别 1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象.2. jQuery对象:jquery对象就是使用jquery的方法获取页 ...
- spring security和java web token整合
思路: spring security 1.用户输入用户名密码. 2.验证:从库中(可以是内存.数据库等)查询该用户的密码.角色,验证用户名和密码是否正确.如果正确,则将填充Authenticatio ...
- cc.formatStr()用法
cc.formatStr() 第一个变量为含有 %s 或 %d 的字符串 后面依次为%s或%d对应的内容
- 本地连接服务器的redis,jedisCluster创建问题
1.redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource from the pool 查看 ...
- Django教程(1)
增加新的视图: 1. 在app/view.py下增加调用视图函数 def horizonG(request): return render(request, 'horizonG.html') 2. 在 ...