vue点击当前按钮变色

本文介绍如何在Vue项目中实现按钮被点击时改变颜色的效果,通过绑定点击事件和CSS样式实现动态交互。
<template>
  <div>
    <div>
      <ul class="year-wrap">
        <li v-for="item,index in lis" :key="index"><Button :class="{ active:changeBackground == index }" @click="changeItem(item.id)">{{item.title}}</Button> </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lis:[
        { title:'2021全年',id:'0' },
        { title:'2020全年',id:'1' },
        { title:'2020年至今',id:'2' },
        { title:'2019年至今',id:'3' },
      ],
      changeBackground:0
    }
  },
  mounted() {

  },
  methods:{
    changeItem(index) {
      this.changeBackground = index
    }
  }
}
</script>

<style lang="less" scoped>
.year-wrap {
  width: 96%;
  height: 60px;
  background: #fff;
  margin: auto;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.active {
  background: #19BE6B;
  color: #fff;
}
</style>
Vue中实现选中按钮颜色变化,有多种方法,以下为你详细介绍: ### 方法一:动态添加class类名 通过循环遍历生成按钮,在按钮上绑定点击事件并传入索引参数,然后在方法里将索引赋值给定义的变量,最后在按钮标签上运用`:class`动态添加类名来实现颜色变化。 ```vue <template> <div> <ul> <li v-for="(item, index) in List" :key="index" @click="change(index)"> <a href="#" :class="{active: currentIndex === index}">{{item}}</a> </li> </ul> </div> </template> <script> export default { data() { return { List: ['公司简介', '企业文化', '员工天地', '产品介绍'], currentIndex: 0 }; }, methods: { change(index) { this.currentIndex = index; } } }; </script> <style lang="scss" scoped> ul { display: flex; } li { margin-right: 20px; } a { color: #000; } .active { color: red; } </style> ``` 在上述代码中,当点击某个按钮时,`change`方法会将当前按钮的索引赋值给`currentIndex`,`:class`根据`currentIndex`和当前索引是否相等来决定是否添加`active`类名,从而改变按钮颜色 [^2]。 ### 方法二:动态绑定内联样式 使用`:style`动态绑定内联样式,通过一个函数检查当前项目是否被选中,根据返回值设置颜色样式。 ```vue <template> <div> <button v-for="item in itemList" :key="item.id" @click="checkItem(item.id)" :style="{ color: isChecked(item.id) ? '#cc7e17' : '' }">{{item.name}}</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const checkedItem = ref(null); const itemList = [ { id: 1, name: '按钮1' }, { id: 2, name: '按钮2' }, { id: 3, name: '按钮3' } ]; const checkItem = (id) => { checkedItem.value = id; }; const isChecked = (id) => { return checkedItem.value === id; }; return { itemList, checkItem, isChecked }; } }; </script> ``` 此代码中,`isChecked`函数检查当前按钮是否被选中,若选中则将按钮文字颜色设置为`#cc7e17`,未选中则不改变颜色 [^3]。 ### 方法三:利用动态类名实现多选变色 定义一个数组存储被选中按钮的索引,当点击按钮时,判断该按钮索引是否在数组中,若在则移除,若不在则添加,同时根据数组内容动态添加类名实现颜色变化。 ```vue <template> <div class="page"> <div class="btns" v-for="(item, index) in 6" :key="index"> <div class="btn" :class="{ act: isChange.includes(index) }" @click="change(index)"> 按钮{{ index + 1 }} </div> </div> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const isChange = ref([]); const change = (index) => { if (isChange.value.includes(index)) { isChange.value = isChange.value.filter((item) => item !== index); } else { isChange.value.push(index); } }; return { isChange, change }; } }; </script> <style> .page { padding: 50px; display: flex; flex-wrap: wrap; } .btn { width: 60px; height: 30px; background-color: pink; margin: 10px; } .act { background-color: red; } </style> ``` 在这段代码里,点击按钮时,`change`方法会更新`isChange`数组,`:class`根据数组内容决定是否添加`act`类名,以此改变按钮背景颜色 [^4]。 ### 方法四:单个按钮点击选中前后颜色变化 直接在按钮上使用`:class`绑定一个数组,根据数据中的布尔值来切换不同的类名,从而实现颜色变化。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <style> .active { width: 56px; height: 32px; background-color: aquamarine; } .actived { width: 56px; height: 32px; background-color: rgb(255, 127, 138); } </style> </head> <body> <div id="app" class="container"> <div @click="get()" class="btn" :class="[type? 'active' : 'actived']">按钮1</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { type: true }, methods: { get() { this.type = !this.type; } } }); </script> </body> </html> ``` 这里点击按钮时,`get`方法会切换`type`的布尔值,`:class`根据`type`的值来选择添加`active`或`actived`类名,改变按钮背景颜色 [^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值