Home >Web Front-end >Vue.js >How to get the value of a certain dom element in vue.js

How to get the value of a certain dom element in vue.js

coldplay.xixi
coldplay.xixiOriginal
2020-11-10 14:36:245224browse

Vue.js method of obtaining the value of a certain dom element: 1. In the [vue.js1.0] version, you can obtain the dom element through [v-el]; 2. In [Vue.js2.0] ] version uses the ref attribute to identify an element.

How to get the value of a certain dom element in vue.js

The operating environment of this tutorial: windows10 system, vue2.5.2, this article is applicable to all brands of computers.

[Recommended related articles: vue.js]

vue.js method of obtaining the value of a DOM element:

1, vue.js1.0 version

You can get the dom element through: v-el

For example:

html code :

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

js code:

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

Result:

How to get the value of a certain dom element in vue.js

2, Vue.js2.0 version

Vue.js 2.0 uses ref to replace v-el and v-ref, and uses the ref attribute to identify an element. .

When we write it becomes

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

It remains the same when called

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

Related free learning recommendations: JavaScript( video)

The above is the detailed content of How to get the value of a certain dom element in vue.js. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn