使用vue制作滑动标签
本文实例为大家分享了vue制作滑动标签的具体代码,供大家参考,具体内容如下
第一步:写出HTML结构
先写一个你需要展示的静态效果,写好后再改为VUE动态生成,代码如下:
标签1 标签2 标签3 内容1
内容2
内容3
本文实例为大家分享了vue制作滑动标签的具体代码,供大家参考,具体内容如下
第一步:写出HTML结构
先写一个你需要展示的静态效果,写好后再改为VUE动态生成,代码如下:
标签1 标签2 标签3 内容1
内容2
内容3
第二步:写出css样式
为你的结构写一个样式,代码如下:
*{ margin:0; padding:0; border-style:none; } ul,ol{ list-style:none; } a{ text-decoration:none; color:#777; } body{ font:normal14px/1.6Helvetica,"MicrosoftYaHei"; color:#777; background-color:#f5f5f5; } .wrap{ width:600px; margin:20pxauto0; } .tabs{ overflow:auto; } .tabsli{ float:left; } .tabslia{ display:block; padding:10px15px; color:#bbb; } .tabsli.active{ background-color:#fff; } .tabsli.activea{ color:#333; } .tabs-con{ padding:15px; background-color:#fff; }
第三步:写出js代码
这一步是关键,要用到vue的内容了
varapp1=newVue({ el:'#app1', data:{ //标签列表的数据,是数组,数组项是对象格式 tabs:[ {name:'标签1'}, {name:'标签2'}, {name:'标签3'} ], num:0 }, //方法,建立自定义函数,对应点击时间onclick methods:{ tabsSwitch(index){ //用到的变量要加上this,表示使用上面构造函数app1的对象num this.num=index; } } })
第四步:更改上边的html结构
{{tab.name}} 内容1
内容2
内容3
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。