vue中DOM的操作

<template>
    <div>
        <li class="sidebar-list"  v-for="(item, index) in meunList"  @click="setPageMenu(index)" ref="menuItem" :key="index" :id="index">
                <router-link class="sidebar-a" :to="{ path: item.listLink }" >{{item.listTitle}}</router-link>
        </li>
    </div>
</template>

<script>
export default {
    data(){
        return{
            meunList:[
                {id:1,listTitle:'这是标题1',listLink:'www.baidu.com'},
                {id:2,listTitle:'这是标题2',listLink:'www.baidu.com'},
                {id:3,listTitle:'这是标题3',listLink:'www.baidu.com'}
            ]
        }
    },
    methods:{
        setPageMenu(index) {
            //这个是获取当前menuItem值，用index来区分当前元素是v-for 产生的数组中的第几个数
                let getMenuText = this.$refs.menuItem[index].innerText;
                console.log(getMenuText)//这是标题1....
                console.log(this.$refs.menuItem[index].getAttribute("id"))//id=1....
            }
    }
}
</script>