使用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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
JavaScript入门基础
Aug 12 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
关于JavaScript中的this指向问题总结篇
2017/07/23 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
Python爬虫工程师面试问题总结
2018/03/22 Python
Python实现的knn算法示例
2018/06/14 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
ECCO爱步官方旗舰店:丹麦鞋履品牌
2018/01/02 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
给领导的检讨书
2014/02/16 职场文书
春节晚会主持词
2014/03/24 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
结婚堵门保证书
2015/05/08 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang