>  기사  >  웹 프론트엔드  >  vue.js에서 특정 dom 요소의 값을 얻는 방법

vue.js에서 특정 dom 요소의 값을 얻는 방법

coldplay.xixi
coldplay.xixi원래의
2020-11-10 14:36:245192검색

vue.js에서 특정 dom 요소의 값을 가져오는 방법: 1. [vue.js1.0] 버전에서는 [v-el]을 통해 dom 요소를 가져올 수 있습니다. js2.0] 버전에서는 ref 속성을 사용하여 요소를 식별합니다.

vue.js에서 특정 dom 요소의 값을 얻는 방법

이 튜토리얼의 운영 환경: windows10 시스템, vue2.5.2, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.

【추천 관련 기사: vue.js

vue.js 특정 DOM 요소의 값을 가져오는 방법:

1, vue.js1.0 버전

을 전달할 수 있습니다: v-el dom 요소를 얻으려면

예:

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);
        }
    }
});

관련 무료 학습 추천: JavaScript(동영상)

위 내용은 vue.js에서 특정 dom 요소의 값을 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.