vue獲取dom元素值

1、通過refs來獲取dom元素內容
2、需要利用到jq,但是不支持,學習vue.js,都說需要拋棄jq,否則會禁錮你的思想


通過refs方法

ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子組件上,引用就指向組件實例。這裏主要是介紹在普通dom元素上使用。看下面的例子:

無論是點擊aa還是bb都能獲取到類名爲aa的元素值。

HTML

<div id="App">
     <div class="aa" ref="menuItem" @click="aa($event)">aa</div>
     <div @click="bb">bb</div>
</div>

JS

<script>
     new Vue({
          el: '#App',
          methods: {
               bb: function() {
                    var getMenuText = this.$refs.menuItem.innerText;
                    console.log(getMenuText);//aa
               },
               aa: function(e) {
                    var el = e.target;
                    console.log(el);//<div class="aa">aa</div>
               }
          }
     })
</script>

通過jq方式

個人見解:兩種方式並用,感覺有點冗餘。話不多說,看上面的例子,aa的點擊事件

var el = e.target;// 當前元素,可修改(利用jq,可獲取到他的子元素)
var el = e.currentTarget; //當前元素,不可修改(不能用此方法獲取到他的子元素)
發佈了21 篇原創文章 · 獲贊 27 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章