获取动态绑定ref方法

绑定语法  :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}`)

    }

  }

})

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容