Vue实现点击列表切换并改变颜色

实现效果图如下

通过Vue的父子组件传值实现效果，单击切换颜色会进性改变并添加下划线

父组件代码实现(Home.vue)

需要进性对子组件的导入
import TabControl from ‘@/components/content/TabControl’

 <tab-control:titles="['流行','新款','经典']"class="tab-control"/>

js代码

<script>
import TabControl from '@/components/content/TabControl'
export default {name: 'Home',data () {return {}},components: {TabControl}
}
</script>

子组件代码实现（TabControl.vue)

  <div id="tab-control"><divclass="tab-control-item"v-for="(item,index) in titles":key="index":class="{active:index===currentIndex}"@click="tabcontrol(index)"><span>{{item}}</span></div></div>

<script>
export default {props: {titles: {type: Array,default: function () {return []}}},data () {return {currentIndex: 0}},methods: {tabcontrol (index) {this.currentIndex = index;}}}
</script>

CSS代码

<style scoped>
#tab-control {display: flex;width: 100%;font-size: 15px;text-align: center;background-color: #fff;height: 40px;line-height: 40px;
}
.tab-control-item {flex: 1;
}
.tab-control-item span {padding: 5px;
}
.active {color: var(--color-high-text);
}
.active span {border-bottom: 3px solid #ff5777;
}

如何将列表固定到某一个位置使用定位实现

只需要对标签添加如下：

.tab-control {position: sticky;top: 44px;
}

效果图

Vue实现点击列表切换并改变颜色相关推荐

wenzhixin bootstrap-table 点击table单元格改变颜色
bootstrap-table用于展示数据非常方便,也需要满足一些个性化需求.比如点击窗格(td)标记下颜色,用于目测代码如下,转载请注明 $("table").on('clic ...
vue两个按钮切换_vue点击循环添加列表点击来回切换
1.v-on:绑定一个事件后面放事件名简写 @事件名="函数" 例如: 按钮 var vm=new Vue({ el:'#itany', data:{ msg:'hello' ...
vue评论点赞列表点赞，点击哪个哪个状态改变
vue评论点赞列表点赞,点击哪个哪个状态改变后台数据如下: { "body":{ "host":null, "code":200, &qu ...
vue点击按钮切换显示不同内容_邂逅Vue
01 什么是Vue.js Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架. 看到这里,你就会问了,什么是渐进式? 渐进式就是你可以将Vue作为一个项目中的部分组件改 ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
vue动态点击切换css样式且子元素动态显示和隐藏
vue动态点击切换css样式并子元素动态显示和隐藏 <template><div v-for="i in 5" class="el-personal&q ...
vue+videojs视频播放、视频切换、视频断点分段上传
"本次需求是做一个视频列表,点击视频列表播放对应视频:同时要求实现断点分段上传大文件(视频)的功能 . videojs文档:Getting Started with Video.js - V ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...

Vue实现点击列表切换并改变颜色

Vue实现点击列表切换并改变颜色

Vue实现点击列表切换并改变颜色相关推荐

最新文章

热门文章