您的位置:首页 > Web前端 > Vue.js

vue动态加颜色并跳转对应的标题

2019-08-15 16:11 134 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/darkCloudss/article/details/99640787

html+css

<style>
ul,li{
list-style: none;
}
ul,li{
display:inline-block;

}
li{
cursor: pointer;
height:35px;
width:150px;
background-color:#dde;
margin-left:10px;
text-align: center;
line-height:35px;
}
.colors{
background-color:palevioletred;
}
</style>

<div id="my">
<ul v-for="(item,i) in getData" @click="showDta(item)">

<li :class="{colors:changeColor == i}" @click="change(i)">
{{item.title}}
</li>
</ul>
<div>{{list}}</div>
</div>
new Vue({
el:'#my',
data:{
getData:[{title:"我是标题0"},{title:"我是标题1"},{title:"我是标题2"},{title:"我是标题3"},{title:"我是标题4"},{title:"我是标题5"}],
list:"我是标题0",
changeColor:0,
},
methods:{
showDta(i){
this.list = i.title;
},
change(i){
this.changeColor = i;
}
},
mounted:function(){
// console.log(this.getData[0].title);
// this.showDta(this.getData[0].title);
this.getList();
},

})

如图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: