vuejs如何取得元素

vuejs取得元素的方法：1、開啟對應的程式碼檔案；2、給元素綁定「ref=「XXX」；3、透過「this.$refs.XXX」或「this.refs ['XXX']」來取得即可。

本文操作環境：windows7系統、Vue2.0版，DELL G3電腦。

vuejs如何取得元素？

Vue中取得dom元素

Vue.js雖然說是資料驅動頁面的，但有時候我們也要取得dom物件來進行一些操作。

vue的不同版本取得dom物件的方法不一樣

Vue.js  1.0版本中，透過v-el綁定，然後透過this.els.XXX來取得

#Vue.js  2.0版本中。我們透過給元素綁定ref=“XXX”，然後透過this.$refs.XXX或this.refs['XXX']來取得

以2.0為例：

<template>
  <section>
    <div ref="hello">
      <h1 id="Hello-nbsp-World-nbsp">Hello World ~</h1>
    </div>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      get() {
        console.log(this.$refs[&#39;hello&#39;]);
        console.log(this.$refs.hello);
      }
    }
  }
</script>

vue中操作dom需要謹慎，尤其是添加或刪除dom的時候，特別是mounted()和created()的時候，此時dom物件還沒有生成，要放在this.nextTick ()的回呼函數中。

 嗯，就醬~~

 推薦：《最新的5個vue.js影片教學精選》

以上是vuejs如何取得元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！