首頁  >  文章  >  web前端  >  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版本

可以透過: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