vue v-bind:class 动态添加类以改变样式

最新推荐文章于 2024-04-08 08:36:37 发布

lfkabb

最新推荐文章于 2024-04-08 08:36:37 发布

阅读量308

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/lfkabb/article/details/119186688

版权

Vue.js 样式绑定点击事件导航效果动态类名

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

要做成这样的点击切换的导航效果

需要做点击添加类以改变样式

在菜鸟教程上看到了一些方法，大家可以参考学习 Vue.js 样式绑定 | 菜鸟教程 (runoob.com)

但是为了实现效果，我这样写了：

<view class="nav">
			<view class="title_one" :class="{active:current==index}" v-for="(item,index) in list" @click="selectTitle(index)">
				{{item}}
				<text class="borderLine"></text>
			</view>
		</view>

data() {
    return {
        list:["博客园","首页","新随笔","联系"], //定义数组内容
		current:0  //定义 current 当前值
    }
},
methods：{
    selectTitle(index){  //点击事件
			console.log(index);
			this.current = index;
		}
}

css:

.nav{
	width: 100%;
	height: 50px;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
}
.title_one{
	width: 25%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	position: relative;
}
.active{
	color: #007AFF;
}
.active .borderLine{
	width: 20px;
	height: 4px;
	background-color: #007AFF;
	position: absolute;
	bottom: 2px;
	left: calc(50% - 10px);
}

这样就可以有点击改变样式的效果啦