vue获取元素Dom,并加样式

vue获取元素Dom,并加样式

<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: '张三' },
        { name: '李四' },
        { name: '王二' },
      ]
    }
  },
  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>