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

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

このチュートリアルの動作環境: 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: '#app',
    methods: {
        ok() {
           var xx = this.$els.sxx.value;
           console.log(xx);
        }
    }
});

結果:

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: '#app',
    methods: {
        ok() {
           var xx = this.$refs.sxx.value;
           console.log(xx);
        }
    }
});

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

rrreee

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

(ビデオ)

###

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