vue实现tab切换外加样式切换方法


Posted in Javascript onMarch 16, 2018

实例如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  * {
   margin: 0;
   padding: 0;
   list-style: none
  }
  #app {
   width: 504px;
   height: 300px;
   margin: 100px auto;
   border: 1px solid #000;
  }
  ul {
   overflow: hidden;
  }
  li {
   width: 100px;
   height: 50px;
   float: left;
   text-align: center;
   line-height: 50px;
   border-bottom: 1px solid #000;
   border-right: 1px solid #000;
  }
  li:nth-child(5) {
   border-right: none;
  }
  .cur {
   height: 51px;
   background: blue;
   border-bottom: none;
  }
 </style>
</head>
<body>
<div id="app">
 <ul>
  <li v-for="(num,index) in nums" :class="{cur:iscur==index}" @click="iscur = index,tab('text'+(index+1))">
   {{num.t}}
  </li>
 </ul>
 <div class="box">
  <component :is='currentView' keep-alive></component>
 </div>
</div>
<script src="vue.js"></script>
<script>
 const text1 = Vue.component('text1', {template: `<div><h1>Text111111111111</h1></div>`});
 const text2 = Vue.component('text2', {template: `<div><h1>Text222222222222</h1></div>`});
 const text3 = Vue.component('text3', {template: `<div><h1>Text333333333333</h1></div>`});
 const text4 = Vue.component('text4', {template: `<div><h1>Text444444444444</h1></div>`});
 const text5 = Vue.component('text5', {template: `<div><h1>Text555555555555</h1></div>`});
 var vm = new Vue({
  el: "#app",
  data: {
   currentView: text1,
   nums: [{t: "text1"}, {t: "text2"}, {t: "text3"}, {t: "text4"}, {t: "text5"}],
   iscur: 0
  },
  methods: {
   tab(tabText){
    this.currentView = tabText;
   }
  }
 })
</script>
</body>
</html>

以上这篇vue实现tab切换外加样式切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
DOM基础教程之使用DOM + Css
Jan 20 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 #Javascript
node.js博客项目开发手记
Mar 16 #Javascript
vue iView 上传组件之手动上传功能
Mar 16 #Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 #Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 #Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 #Javascript
p5.js入门教程之小球动画示例代码
Mar 15 #Javascript
You might like
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python定时器(Timer)用法简单实例
2015/06/04 Python
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
python实现excel读写数据
2021/03/02 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python日志logging模块使用方法分析
2019/05/23 Python
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
单位委托书格式范本
2014/09/29 职场文书
2014年社区工作总结
2014/11/18 职场文书
2014年化验员工作总结
2014/11/18 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
荒岛余生观后感
2015/06/09 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Python echarts实现数据可视化实例详解
2022/03/03 Python
基于Python实现射击小游戏的制作
2022/04/06 Python
Python开发简易五子棋小游戏
2022/05/02 Python