1. 程式人生 > >vue獲取dom元素的內容

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; }