1. 程式人生 > >Vue中獲取dom元素

Vue中獲取dom元素

直接上程式碼

<div id="app">
   <p class='p1' v-way="wayFun('p1')">測試</p>
   <p class='p2' v-way="wayFun('p2')"></p>
</div>
export default {
  data:function(){
    return {
      elements: {}//儲存元素物件
    }
  },
  directives : {
    way (el, bind) {//自定義指令
      if (typeof bind.value == 'function')//判斷是function
        bind.value(el);//傳入element
    }
  },
    mounted () {
    console.log(this.elements.p1.innerHTML); //=> 測試
    console.log(this.elements.p2); //=> DOM p標籤
  },
  methods : {
    wayFun (flag) {
      return (el)=>{
        this.elements[flag] = el;
      }
    }
  }
}

獲取到dom元素有何需求自行更改即可

相關推薦

Vue獲取dom元素

直接上程式碼 <div id="app"> <p class='p1' v-way="wayFun('p1')">測試</p> <p class='p2' v-way="wayFun('p2')"></p

vue獲取dom元素

在vue中可以通過給標籤加ref屬性,就可以在js中利用ref去引用它,從而操作該dom元素,以下是個例子,可以當做參考 <template> <div> <div id="box" ref="mybox"> DE

js獲取dom元素大小

jsdocument.documentElement這裏的documentElement實際就是整個htmldocument.documentElement.clientWidth/clientHeight可視窗口的大小oDiv.offsetWidth/Height;/clientWidth/clientHe

Vue2.0獲取dom元素

Vue.js雖然說是資料驅動頁面的,但是有時候我們也要獲取dom物件進行一些操作。 vue的不同版本獲取dom物件的方法不一樣   Vue.js  1.0版本中,通過v-el繫結,然後通過this.els.XXX來獲取 Vue.js  2.0版本中。我們通過給元素繫結re

problem: vue獲取動態元素高度

前言:始終要相信你能想到的解決方案,基本上都是可以用技術實現的...   解決方法就是在mounted中在this.$nextTick()去獲取,如果沒有獲取到,不是寫法錯就是,元素沒有繫結對地方,注意檢查自己的邏輯,自己在寫什麼思路一定要清晰。   有這樣一個需求: 實現一個表

javascript獲取dom元素的高度和寬度

javascript中獲取dom元素高度和寬度的方法如下: 網頁可見區域寬: document.body.clientWidth 網頁可見區域高: document.body.clientHeight 網頁可見區域寬: document.body.offsetWidth (

Vue獲取要操作的元素DOM

在使用Vue的時候,有時候我們希望直接用Js操縱DOM來實現某些效果,具體實現只用利用Vue提供的ref屬性以及this.$refs即可實現。下面放一個小DEMO! <!DOCTYPE html

Vue獲取DOM元素樣式 && 樣式更改

find style ons 設置 我們 獲取樣式 win 更改 exp 在 vue 中用 document 獲取 dom 節點進行節點樣式更改的時候有可能會出現 ‘style‘ is not definde的錯誤,這時候可以在 mounted 裏用 $refs 來獲取樣式

vue 組件傳遞值以及獲取DOM元素的位置信息

efault pat port als 圖片資源 ets nbsp import console 1.父組件 select_li.vue 1.1 父組件模板 1 <template> 2 <div id=‘selectLi‘ ref="selec

Vue獲取DOM元素的屬性值

 專案中需要做一個小彈層,如下圖:   我需要知道點選元素距離頂部的值,再計算彈層的top值,如下圖:   在vue中如何獲取到DOM元素距離視窗頂部的值呢? 1.通過$event獲取 html: <div class="sort-item" @

Vue系列之 => ref獲取DOM元素和元件

可以獲取DOM元素,和元件中的資料,方法 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="v

vue獲取DOM元素、路由

1:DOM 獲取DOM元素: 給DOM元素新增事件的特殊情況 2:路由 區域性內容innerHTML的替換   vue-router: 執行結果:url出現 #/ 說明vue-router啟動成功,加入log

vue獲取dom元素

1、通過refs來獲取dom元素內容 2、需要利用到jq,但是不支援,學習vue.js,都說需要拋棄jq,否則會禁錮你的思想 通過refs方法 ref 被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的 $refs 物件上。如果在

vue獲取dom元素的內容

通過ref來獲取dom元素 在vue官網上對ref的解釋 ref 被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的 $refs 物件上。如果在普通的 DOM 元素上使用,引用指向的就是

jquery獲取相鄰元素相關的命令:next()、prev()和siblings()

cnblogs lin Language javascrip prev round blog scrip color jquery裏我們要獲取某個元素的相鄰元素時,可以用到的命令有三個: next():用來獲取下一個同輩元素。 prev():用來獲取上一個同輩元素。 sib

jquery——獲取dom元素身上的綁定事件的問題

blog 問題 例如 tor 函數功能 strong .get 也有 cnblogs 在jQuery1.8.0版本之前,我們要想獲取某個DOM綁定的事件處理程序可以這樣: $.data(domObj,‘events‘);//或者$(‘selector‘).da

Jsoup(四)-- Jsoup獲取DOM元素屬性值

div 解析 pri com tar 標題 技術 windows [] 1.獲取博客園的博客標題以及博客地址,獲取友情鏈接 2.代碼實現: public static void main(String[] args) throws Exception{

使用html元素的getBoundingClientRect來獲取dom元素的時時位置和大小

html 可能 .get dom元素 logs query htm images cli 使用: var section = $(‘.section‘);這是jquery包裝的dom元素,其他前端框架返回的可能也是一個包裝元素, 我們需要獲得的是裏面的html的dom元素

JQuery動畫——.trim()去空格、.get()和.index()獲取DOM元素

JQuery動畫 .trim()去空格、.get()和.index()獲取DOM元素1 .trim()函數用於去除字符串兩端的空白字符,沒有多余的參數用法2 移除字符串開始和結尾處的所有換行符,空格(包括連續的空格)和制表符(tab),如果這些空白字符在字符串中間時,它們將被保留,不會被移除

vue1和vue2獲取dom元素的方法

log col 方法 art nbsp tps ref class refs vue1.*版本中 在標簽中加上el=‘dom‘,然後在代碼中this.$els.dom這樣就拿到了頁面元素 例如:<div class=‘box‘ v-el: myBox>你好<