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 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
Mar 28 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
详解ECMAScript6入门--Class对象
Apr 27 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 获取本地IP代码
2013/06/23 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
js 省地市级联选择
2010/02/07 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
js闭包实例汇总
2014/11/09 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python中实现的RC4算法
2015/02/14 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python pandas模块基础学习详解
2019/07/03 Python
小组合作学习反思
2014/02/18 职场文书
房屋所有权证明
2015/06/19 职场文书
党员学习中国梦心得体会
2016/01/05 职场文书