ホームページ  >  記事  >  ウェブフロントエンド  >  vue.jsで特定のdom要素の値を取得する方法

vue.jsで特定のdom要素の値を取得する方法

coldplay.xixi
coldplay.xixiオリジナル
2020-11-10 14:36:245210ブラウズ

Vue.js で特定の dom 要素の値を取得する方法: 1. [vue.js1.0] バージョンでは、[v-el] を通じて dom 要素を取得できます; 2. [ Vue.js2.0] ] バージョンでは、要素を識別するために ref 属性を使用します。

vue.jsで特定のdom要素の値を取得する方法

このチュートリアルの動作環境: Windows10 システム、vue2.5.2、この記事はすべてのブランドのコンピューターに適用されます。

[おすすめ関連記事: vue.js]

vue.js で DOM 要素の値を取得する方法:

1、vue.js1.0 バージョン

次の方法で dom 要素を取得できます: v-el

例:

html コード:

<input type="text" name="xxx" id="xxx" v-el:sxx />
            <button @click="ok()">确定</button>

js コード:

var vm = new Vue({
    el: &#39;#app&#39;,
    methods: {
        ok() {
           var xx = this.$els.sxx.value;
           console.log(xx);
        }
    }
});

結果:

vue.jsで特定のdom要素の値を取得する方法

2、Vue.js2.0 バージョン

Vue.js 2.0 では、ref を使用して v-el と v-ref を置き換え、ref 属性を使用して要素を識別します。 .

書くと

<input type="text" name="xxx" id="xxx" ref=&#39;sxx&#39; />
<button @click="ok()">确定</button>
になります

var vm = new Vue({
    el: &#39;#app&#39;,
    methods: {
        ok() {
           var xx = this.$refs.sxx.value;
           console.log(xx);
        }
    }
});

呼び出しても同じままです
rrreee

関連する無料学習の推奨事項: JavaScript

(ビデオ)
###

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。