绑定语法 :ref="`thumb${item.gspecid}`"
获取语法： this.$refs[`thumb${item.gspecid}`]
动态获取绑定节点坐标：
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="(todo, index) in todos" ref='dom'>
<p>{{ todo.text }}</p>
<button @click='getMap(index)'>获取坐标</button>
</li>
</ol>
<button @click='addLi'>添加</button>
</div>
方法：
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript" },
{ text: "Learn Vue" },
{ text: "Play around in JSFiddle" },
{ text: "Build something awesome" }
]
},
methods: {
addLi() {
this.todos.push({
text: new Date().getTime()
})
},
getMap(index) {
const dom = this.$refs.dom[index]
alert(`当前坐标，x:${dom.offsetLeft},y:${dom.offsetTop}`)
}
}
})
网友评论