vue动态控制样式及图片切换

最新推荐文章于 2024-08-23 13:29:29 发布

NaN.

最新推荐文章于 2024-08-23 13:29:29 发布

阅读量1k

点赞数

文章标签： vue html js

本文链接：https://blog.csdn.net/weixin_43313170/article/details/105817493

版权

本文介绍如何在Vue项目中动态控制元素样式，并实现图片的切换效果。通过结合Vue的data属性、指令v-bind和事件监听，可以实现对HTML元素样式的动态更新，以及在用户交互时无缝切换图片。

摘要由CSDN通过智能技术生成

<template>
  <div class="container">
    <Row>
      <Col span="4" v-for="(item,index) in list" :key="index">
      	<div @click="handleClick($event,item)" @mouseover="mouseOver(item)" @mouseleave="mouseLeave(item)">
	        <Card class="textCenter" :class="{active:$route.path==item.path}">
	            <img class="img" :src="$route.path==item.path?item.imgW:item.img" />
	            <h4 class="h4">{
   {
   item.title}}</h4>
	        </Card>
      	</div>
      </Col>
    </Row>
    <router-view></router-view>
  </div