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 ...
随机推荐
- 原型链污染(Node.js污染,javasrcipt原型链污染的)
学习链接: https://www.jianshu.com/p/6e623e9debe3 关于NJS https://xz.aliyun.com/t/7184 相关题是 GYCTF ez_expr ...
- java - 锁的种类及详解
锁类型 锁根据其特性能够划分出各种各样的锁类型,该文主要介绍以下锁的作用及特性 乐观锁/悲观锁 独享锁/共享锁 互斥锁/读写锁 可重入锁 公平锁/非公平锁 分段锁 偏向锁/轻量级锁/重量级锁 自旋锁 ...
- sqli-labs1-10基础掌握
00x01基于错误的GET单引号字符型注入 首先and 1=2判断是否为数值型sql注入,页面正常,不是 然后’测试,发现页面报sql语句错误,存在字符型sql注入 猜测参数为单引号闭合,用注释语句 ...
- Javaweb版四则运算
显示出题界面shu01.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...
- 微信小程序配置合法域名和业务域名
在微信小程序的开发过程中,当需要请求第三方网站数据时,都是直接调用wx.request接口的: xxxx:function(){ wx.request({ url: 'xxxxxxxxxx', dat ...
- 网络编程UDP、TCP详解
网络编程 网络编程主要用于解决计算机与计算机(手机.平板-)之间的数据传输问题. 1.InetAddress(IP类) 方法: 方法 描述 getLocalHost() 获取本机的IP地址对象 ...
- Selenium原理
from selenium import webdriver:导入webdriver模块 当导入webdriver模块时,会执行\selenium\webdriver目录下的__init__.py ...
- msfconsole启动失败并报错`not_after=': bignum too big to convert into `long'的解决方法
1.启动msfconsole失败并报如下错误: /usr/share/metasploit-framework/lib/msf/core/payload/android.rb:86:in `not_a ...
- CodeForces 1141B
https://vjudge.net/problem/CodeForces-1141B #include<bits/stdc++.h> using namespace std; int m ...
- ubuntu18 + caffe+cpu+anaconda3
本记录只暂时只记录一些错误. 编译错误,opencv3.2与anaconda3下的libtiff不兼容,冲突. 问题查找(查找所有的TIFF库与编译错误提示匹配/usr/lib/x86_64-linu ...