动态设置css样式，背景图，class

 1.动态设置class

        设置index的值，动态切换class

        <div  :class="{'active': index > 3}"> </div>

2.动态设置style

 <div  :style="{color: item.color, background:'url('+item.imgUrl+')', }"</div>

3.动态设置背景图 

<template>
  <div>
    <ul>
      <div v-for="item in [1,2,3,4,5,6,7,8]" :key="item" >
        <li class="list"
        :style="{'--bgurl': item%2===0 ? ('url('+img1+')'): ('url('+img2+')')}"></li>
      </div>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      img1: './img/bg1.png',
      img2: './img/bg2.png',
    }
  },
}
</script>
<style scoped>

.list::before {
  background-image: var(--bgurl);
}
</style>