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(); }, })
如图
相关文章推荐
- vue点击菜单跳转时,背景颜色动态变化
- 如何在微信中给Vue页面动态应用设置标题
- vue 当前页面路径带参 跳转的目标页面动态数据不加载
- vue中自动生成表头再根据表头与内容对应填充动态生成表格的两个方法
- vue使用swiper动态获取数据轮播异常以及点击跳转
- vue如何通过id从列表页跳转到对应的详情页
- Vue动态修改网页标题
- 对于Vue-cli的路由跳转以及使用vue.js动态修改CSS样式
- cms 页面管理----scheme动态跳转到对应activity
- vue 动态修改页面标题title
- 动态修改vue-cli的spa的标题
- vue项目使用ECharts的中国地图,设置地图不同板块的颜色以及动态显示效果
- 网站导航栏点击变色并跳转页面导航栏颜色如何固定在相对应栏目位置
- Vue 单页内使用router-link跳转,动态使用router.push()实现页内跳转,跳转到其他组件
- vue+vuex+axios+echarts画一个动态更新的中国地图
- 网站动态标题设定
- easyui datagrid中动态改变某行的颜色
- 修改iOS导航栏标题的字体颜色和大小以及导航栏的背景图片
- 动态修改ViewPagerIndicator CustomTabPageIndicator Tab标签文字颜色
- AppbarLayout中Toolbar包含了子view时设置标题颜色