실무/vue.js 실무 기능

10. vue.js 클래스에 숫자 넣고 싶을때 :clsss

DEV-Front 2023. 1. 8. 21:17
반응형
<template>
     <div :class="[`notice drag${index}`]"
        v-for="(item, i) in modalList"
        @click="dragstart(index)"
        @mousedown="mousedown">
     </div>
</template>

<script>
let zIndex = 9100;
 
export default {
  data() {
    return {
      modalList : [],
      noticeNum: '',
    };
  },
  methods: {
     dragstart(index){
        this.noticeNum = index;
        zIndex++;
    },
    mousedown(){
        let notice = document.querySelector([`.drag${this.noticeNum}`]);
        notice.style.cursor = 'grabbing';
        notice.style.zIndex = zIndex;
    },   
  },
};
</script>

<style lang="scss" scoped></style>
반응형