vue獲取dom元素內容

通過ref來獲取dom元素

在vue官網上對ref的解釋

ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實例

當 v-for 用於元素或組件的時候，引用信息將是包含 DOM 節點或組件實例的數組

 

比如我現在要實現的效果是點擊用v-for生成的li ，獲取到該元素的值

首先要獲取當前點擊的li元素，我們要做的是

1.給dom添加點擊事件和ref屬性

 

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

 

2.然后在點擊事件方法中使用ref

setPageMenu(index) {
//這個是獲取當前menuItem值，用index來區分當前元素是v-for 產生的數組中的第幾個數
    let getMenuText = this.$refs.menuItem[index].innerText;
}

學習筆記，如有不足請多多指教