使用vue制作滑动标签


Posted in Javascript onSeptember 21, 2019

本文实例为大家分享了vue制作滑动标签的具体代码,供大家参考,具体内容如下

第一步:写出HTML结构

先写一个你需要展示的静态效果,写好后再改为VUE动态生成,代码如下:

<div id="app1" class="wrap">
 <ul class="tabs">
 <li class="active"><a href="javascript:" >标签1</a></li>
 <li><a href="javascript:" >标签2</a></li>
 <li><a href="javascript:" >标签3</a></li>
 </ul>
 <div class="tabs-con">
 <p>内容1</p>
 </div>
 <div class="tabs-con">
 <p>内容2</p>
 </div>
 <div class="tabs-con">
 <p>内容3</p>
 </div>
</div>

第二步:写出css样式

为你的结构写一个样式,代码如下:

<style type="text/css">
 * {
 margin: 0;
 padding: 0;
 border-style: none;
 }
 ul,ol {
 list-style: none;
 }
 a {
 text-decoration: none;
 color: #777;
 }
 body {
 font: normal 14px/1.6 Helvetica,"Microsoft YaHei";
 color: #777;
 background-color: #f5f5f5;
 }
 .wrap {
 width: 600px;
 margin: 20px auto 0;
 }
 .tabs {
 overflow: auto;
 }
 .tabs li {
 float: left;
 }
 .tabs li a {
 display: block;
 padding: 10px 15px;
 color: #bbb;
 }
 .tabs li.active {
 background-color: #fff;
 }
 .tabs li.active a {
 color: #333;
 }
 .tabs-con {
 padding: 15px;
 background-color: #fff;
 }
</style>

第三步:写出js代码

这一步是关键,要用到vue的内容了

var app1 = new Vue ({
 el: '#app1',
 data: {
 //标签列表的数据,是数组,数组项是对象格式
 tabs: [
  {name:'标签1'},
  {name:'标签2'},
  {name:'标签3'}
 ],
 num: 0
 },
 //方法,建立自定义函数,对应点击时间onclick
 methods: {
 tabsSwitch(index) {
  //用到的变量要加上this,表示使用上面构造函数app1的对象num
  this.num = index;
 }
 }
})

第四步:更改上边的html结构

<div id="app1" class="wrap">
 <ul class="tabs">
 <li v-for="(tab,index) in tabs" :class="{active:num===index}" @click="tabsSwitch(index)"><a href="javascript:">{{tab.name}}</a></li>
 </ul>
 <div class="tabs-con" v-show="num===0">
 <p>内容1</p>
 </div>
 <div class="tabs-con" v-show="num===1">
 <p>内容2</p>
 </div>
 <div class="tabs-con" v-show="num===2">
 <p>内容3</p>
 </div>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
vue router 配置路由的方法
Jul 26 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 #Javascript
Vue插件之滑动验证码
Sep 21 #Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 #Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 #Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 #Javascript
layui table 表格模板按钮的实例代码
Sep 21 #Javascript
js实现图片3D轮播效果
Sep 21 #Javascript
You might like
几个实用的PHP内置函数使用指南
2014/11/27 PHP
php查看当前Session的ID实例
2015/03/16 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
生产操作工岗位职责
2014/09/16 职场文书
对公司的意见和建议
2015/06/04 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书