效果图如下：
实现代码如下：
<!--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:'Maya',selectPlugs:'vrayformaya 5.20.02'},{id:'2',settingName:'888',renderSoft:'Maya',selectPlugs:'vrayformaya 5.20.02'},{id:'3',settingName:'888',renderSoft:'Maya',selectPlugs:'vrayformaya 5.20.02'},{id:'4',settingName:'888',renderSoft:'Maya',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>
如果觉得《点击div改变颜色（HTML+CSS+JS+VUE实现）》对你有帮助，请点赞、收藏，并留下你的观点哦！
