Vue点击切换组件颜色

聪明小萝卜

已于 2024-03-06 15:21:28 修改

阅读量439

点赞数 9

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2024-03-06 15:08:50 首次发布

本文链接：https://blog.csdn.net/m0_58031031/article/details/136506422

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章描述了如何在Vue.js中，通过修改点击事件处理函数，使列表项在点击时从蓝色变为橙色，涉及数据绑定和CSS样式控制。

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

例如我有一个这样的组件，我希望在点击组件之后由蓝色变成橙色

先把原来的代码附上(简化掉了叉号）：

<div v-for="(item, index) in words" :key="index" class="scrollbar-demo-item">
     <span>{{ item }}</span>
</div>

修改后的代码(简化掉了叉号）：

<template>
<div v-for="(item, index) in words" @click="changeColor" :key="index" :class="[checked?'scrollbar-demo-item1':'scrollbar-demo-item']">
     <span>{{ item }}</span>
</div>
</template>

<script>
export default{
    data() {
        return {
        checked: false
        };
    },
    method(){
        changeColor(){
                this.checked = !this.checked; // 切换 checked 变量的值
            }
        },
    }
}
</script>

<style>
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background:rgb(237,245,255);
  color:rgb(84,156,253);
}
.scrollbar-demo-item1 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background:rgb(255, 218, 176);
  color:rgb(255, 153, 0);
}
</style>