Vue takes the element Dom and styles it

Vue takes the element Dom and styles it

<template>
  <div>
   
          <ul class="ul">
            <li class="zkxLi" v-for="(item, index) in List" :key="index">
             {{item.name}}
            </li>
          </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      List: [{name: 'Joe' },
        { name: 'bill' },
        { name: 'the king 2'}}},],mounted() {
    this.$nextTick(() = > {
    
        let liDoms = document.querySelectorAll('.zkxLi')
        for (let i = 0; i < liDoms.length; i++) {
          liDoms[i].className = liDoms[i].className + ' ' + (i % 2= =0 ? 'li-odd' : 'li-even')}})},methods: {}}</script>

<style scoped>
    ul.li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .li-odd {
       background: #0f2139;
     }
    .li-even {
       background: #143f53;
     }
</style>
Copy the code