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 相关文章推荐
为原生js Array增加each方法
Apr 07 Javascript
javascript右下角弹层及自动隐藏(自己编写)
Nov 20 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
原生js实现随机点名功能
Nov 05 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
Aug 08 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
强烈推荐:php.ini中文版(2)
2006/10/09 PHP
PHP下escape解码函数的实现方法
2010/08/08 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
2015/11/02 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
使用Python实现博客上进行自动翻页
2017/08/23 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
Python第三方库安装缓慢的解决方法
2021/02/06 Python
大码女装:Ulla Popken
2019/08/06 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
连锁经营管理专业大学生求职信
2013/10/30 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
解除劳动合同协议书
2014/09/17 职场文书
初中作文评语集锦
2014/12/25 职场文书
导师工作推荐信
2015/03/27 职场文书
2016年安全月活动总结
2016/04/06 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
MySQL 条件查询的常用操作
2022/04/28 MySQL