vuejsで要素を取得する方法

Vuejs の要素取得方法: 1. 対応するコード ファイルを開きます; 2. "ref="XXX"" を要素にバインドします; 3. "this.$refs.XXX" または "this.refs" を渡します['XXX']" を実行して取得します。

この記事の動作環境: Windows 7 システム、Vue バージョン 2.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>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 の追加や削除、特に mount() や created() を行うときは注意が必要ですが、この時点ではまだ dom オブジェクトは生成されていませんので、したがって、コールバック関数の this.nextTick () に配置する必要があります。

さて、以上です~~

推奨: 「最新の 5 つの vue.js ビデオ チュートリアル セレクション 」

以上がvuejsで要素を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。