微客导航 » 文章资讯 » 使用vue制作滑动标签

使用vue制作滑动标签

2023-08-13 20:30:04 286

本文实例为大家分享了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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

使用vue制作滑动标签

热门推荐

随机推荐