使用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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 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/03/13 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python 描述符(Descriptor)入门
2016/11/20 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
化工机械应届生求职信
2013/11/04 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
写求职信有什么意义
2014/02/17 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
python小型的音频操作库mp3Play
2022/04/24 Python
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android