Vue实现选项卡切换，tab切换

1、实现tab切换就是单击一个选项卡显示其对应的内容，且被点击的选项卡改变颜色，下面有两种实现方法（都不要忘了vue.js的目录要写正确）

2、第一种方法效果图

这个没什么可说的，直接看代码吧（两种方式）

2、第一种完整代码（下边这段代码是我在网上学的）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="./vue.js"></script><style>button {width: 40px;height: 30px;text-align: center;border: none;cursor: pointer;}.active {background: red;color: #fff;border: none;}* {margin: 0;padding: 0;list-style: none;}#app {width: 600px;height: 600px;border: 1px solid #b3b3b3;margin: auto;}ul {height: 50px;background-color: #b6b6b6;color: #000;display: flex;justify-content: space-between;align-items: center;}ul li {width: 150px;text-align: center;line-height: 50px;font-size: 18px;}#app div {padding: 10px;font-size: 18px;}.active {background-color: #00557F;color: #fff;}</style></head><body><div id="app"><ul><li v-for="(val,index) in item" @click="changes(index)" :class="{active:index == num}">{{item[index]}}</li></ul><div v-for="(val,index) in cont" v-show="index==num">{{val}}</div></div><script>/*运用知识点：v-forv-on,简写@v-bind简写:v-show思路：循环数据，当点击时候，把key传到changes方法中，然后num赋值给active循环数组，只要box中key等于num就让它显示出来*/new Vue({el: '#app',data: {item: ["html", "css", "javascript", "Vue"], //导航栏标题cont: ["html内容", "css内容", "javascript内容", "Vue内容"], //内容num: 0},methods: {changes(key) {this.num = key;}}});</script></body>
</html>

3、第二种方式效果图

4、第二种方式完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../vue.js"></script><style type="text/css">.active{color: firebrick;}</style></head><body><div id="app"><!-- 根据num值来添加active class 注意active是用单引号包裹的 --><!-- 添加单击事件更改num的值 --><button :class="num==1?'active':''" @click="num=1">html</button><button :class="num==2?'active':''" @click="num=2">css</button><button :class="num==3?'active':''" @click="num=3">javascript</button><!-- 根据num动态切换显示div内容 --><div v-show="num==1">html内容</div><div v-show="num==2">css内容</div><div v-show="num==3">javascript内容</div></div><script type="text/javascript">new Vue({el:"#app",data:{// 当前索引（显示的索引，需要添加class的索引）num:1,},})</script></body>
</html>

Vue实现选项卡切换，tab切换相关推荐

本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。
本篇文章使用vue结合element-ui开发tab切换vue的不同组件,每一个tab切换的都是一个新的组件. 1.vue如何使用element-ui 上一篇文章已经分享了如何在vue中使用eleme ...
Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
vue监听浏览器tab切换
vue监听浏览器tab切换描述监听tab切换浏览器页面,在离开当前页面和再次进来发生事件监听,类似与小程序的show函数 visibilitychange 详解解决 created() {doc ...
tab vue 竖排_vue 实现tab切换保持数据状态
页面做tab切换,由于组件每一次切换都会重新实例化组件,我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新,减少页面重新渲染以及减少请求实现方法:使用包裹组件列表页面跳转详情 ,列表页面保 ...
vue 锚点定位 tab切换
废话不说下面直接上代码和说明我们这想要实现tab切换时候页面自动滚动定位到锚点位置,因为这个是单页面引用,也没有使用a标签等,使用的是最普通的方法,仅供大家参考. //要实现切换的三个tab项 & ...
vue 实现tab切换动态加载不同的组件
vue 实现tab切换动态加载不同的组件使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...
tab css html,纯css的tab 切换
css 版的tab切换 tab切换 * { margin: 0; padding: 0; } .content{ width: 500px; height: 500px; margin:30px au ...
vue中怎么清空tab选项卡的缓存_vue Tab切换以及缓存页面处理的几种方式
前言相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到.如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样. 1.如何切换使用动态组件,相信大家都能看懂(部分代码省略) ...
vue中怎么清空tab选项卡的缓存_vuejs 内置组件component实现tab切换懒加载和表单输入框内容的清空...
最近项目中使用了vue2.0 官网脚手架进行了开发.开发中的踩一些坑一直没有来得及整理.本篇文章就vuejs内置组件component的一些使用进行一些总结. 1.使用component 实现tab切 ...

Vue实现选项卡切换，tab切换

Vue实现选项卡切换，tab切换相关推荐

最新文章

热门文章