点击div改变颜色HTML+CSS+JS+VUE实现

效果图如下：

实现代码如下：

<!--template里的代码，样式布局自行调整-->
<template>
<div class="soft-setting-list-div" v-for="(item,index) in softSettingList">
     <div style="padding-left: 10px;font-size: 12px" @click="selectSoftSetting(item.id,index)">
       <div class="soft-setting-icon">
         <i class="el-icon-edit-outline" style="font-size: 16px;color: #808080;margin-right: 10px"></i>
         <i class="el-icon-delete" style="font-size: 16px;color: #808080"></i>
        </div>
        <p >{{ item.settingName }}</p>
        <p style="margin-top: -25px">{{ item.renderSoft }}</p>
       <p style="margin-top: -25px">{{ item.selectPlugs }}</p>
     </div>
</div>
</template>

//script里的代码
<script>
export default {
data(){
    return{
			softSettingList:[
			 {id:'1',settingName:'666',renderSoft:'Maya2023',selectPlugs:'vrayformaya 5.20.02'},
        	 {id:'2',settingName:'888',renderSoft:'Maya2023',selectPlugs:'vrayformaya 5.20.02'},
        	 {id:'3',settingName:'888',renderSoft:'Maya2023',selectPlugs:'vrayformaya 5.20.02'},
        	 {id:'4',settingName:'888',renderSoft:'Maya2023',selectPlugs:'vrayformaya 5.20.02'},
			],
			};
		},
mounted() {
    //进入页面默认选中
      this.$nextTick(() => {
        if (document.getElementsByClassName("soft-setting-list-div").length > 0){
          document.getElementsByClassName("soft-setting-list-div")[0].style.backgroundColor="#5cb6ff"
        }
      })
  },
methods:{
	//选中
    selectSoftSetting(data,index){
      if(document.getElementsByClassName("soft-setting-list-div")[index].style.backgroundColor="#5cb6ff" || document.getElementsByClassName("soft-setting-list-div")[index].style.backgroundColor==""){
        for(let item of document.getElementsByClassName("soft-setting-list-div")){
          item.style.backgroundColor="";
        }
        document.getElementsByClassName("soft-setting-list-div")[index].style.backgroundColor="#5cb6ff";
      }else{
        document.getElementsByClassName("soft-setting-list-div")[index].style.backgroundColor=""
      }
    }
}

}
</script>

//css
<style scoped>
.soft-setting-list-div{
  height: 130px;
  width: 190px;
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  /*border: 1px solid #4DD52B;*/
  border: 1px solid #808080;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 8px;
  margin-bottom: 5px;
.soft-setting-list-div .soft-setting-icon{
  visibility: hidden;
  float: right;
  margin-top: -10px;
  margin-right: 10px;
}
.soft-setting-list-div:hover .soft-setting-icon{
  visibility: inherit;
  float: right;
  margin-top: -10px;
  margin-right: 10px;
}
</style>

这篇好文章是转载于：编程之路