Vue实现Tab选项卡切换
本文实例为大家分享了Vue实现Tab选项卡切换的具体代码，供大家参考，具体内容如下
点击不同的标题显示出相应的图片
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<style>
*{
margin: 0px;
padding: 0px;
}
#tab{
width:420px;
margin: 20px auto;
position: relative;
}
#tab ul li{
width: 100px;
height: 30px;
border: 1px solid #6699CC;
float: left;
list-style: none;
text-align: center;
line-height: 30px;
}
#tab ul li:first-child{
border-right: none;
/* border-radius: 10px 0px 0px 0px; */
}
#tab ul li:last-child{
border-left: none;
/* border-radius: 0px 10px 0px 0px; */
}
#tab ul .active{
background-color:orange;
color:white;
}
#tab div{
width: 415px;
position: absolute;
top: 32px;
display: none;
}
#tab div img{
width: 350px;
/* border-radius:0px 0px 10px 10px; */
}
#tab div.current{
display: block;
}
</style>
<body>
<div id="tab">
<ul>
<li v-on:mouseover="change(index)" :class="[currentindex==index?'active':'']":key="item.id"v-for="(item,index) in list">{{item.text}}</li>
</ul>
<div :class="[currentindex==index?'current':'']" v-for="(item,index) in list">
<img :key="item.id" v-bind:src="item.imgsrc"/>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:'#tab',
data:{
currentindex:'0',//当前选项卡的索引
list:[{
id:'1',
text:'apple',
imgsrc:'imgs/1.jpg'
},{
id:'2',
text:'orange',
imgsrc:'imgs/2.jpg'
},{
id:'3',
text:'lemon',
imgsrc:'imgs/3.jpg'
}]
},
methods:{
change:function(index){
this.currentindex=index;
}
}
});
</script>
</html>
效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue实现选项卡及选项卡切换效果
这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回过头来看我的实现代码.记住,通读Vue文档真的很重要,很重要! 这里的Vue以单文件的形式引入,另外代码在实现上会一步步的进行优化,客官不要着急! 下面是一个样式稍微丑陋,但功能OK的选项卡. <!DOCTYPE html> <html> <head> <meta c
-
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:
-
vue动态组件实现选项卡切换效果
本文实例为大家分享了vue动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"&g
-
vue选项卡切换登录方式小案例
本文实例为大家分享了vue选项卡切换登录方式的具体代码,供大家参考,具体内容如下 最终效果 组件代码: <template> <div> <div class="login_warp"> <div class="loginbox fl"> <!-- 三个选项卡按钮 --> <div class="login_header"> <span @click="cur
-
vue中用动态组件实现选项卡切换效果
最近在研究vue的路上,那么今天也算个学习笔记吧! 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"><router-link
-
Vue.js组件实现选项卡以及切换特效
Vue.js组件实现选项卡以及切换动画特效,供大家参考,具体内容如下 最近在学习Vue,当看梁灏大神写的<Vue.js实战>时看到了关于用组件实现选项卡功能,我也根据课后的练习加上自己的理解重新编写了一下. 组件分为pane.js和tabs.js两个部分,话不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
-
vue.js实现选项卡切换
因为前端课要交一个大作业,刚好工作室的项目需要一个后台管理界面,就自学了一下vue,今天做了一个选项卡切换,最开始的作为菜鸡是用的js做的,太难了T.T,后面学了bootstrap就直接用的组件.今天用了感觉太棒了!比bootstrap的组件好用!!! 一.实现原理 我是用的点击事件进行更改data数据的值,v-if指令根据数据的变化来显示/隐藏内容的 1.设置1个content数组,用来存储6个选项内容是否显示的boolean值,默认第一个显示 new Vue({ el:".body&qu
-
Vue.js tab实现选项卡切换
本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo
-
vue中选项卡点击切换且能滑动切换功能的实现代码
具体代码如下所述: <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}<
-
Vue.js组件tabs实现选项卡切换效果
今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di