vuejs의 jquery css에 대한 대안

vuejs의 jquery css에 대한 대안

나는 부에즈를 배우고 모든 것을 jquery 없이 하려고 노력하고 있다.

나는 css 스타일의 라인하이크를 구해야 한다.Jquery에서 나는 다음과 같이 하곤 했다.

let x = $(this).css("line-height");

vuejs 2.5를 사용하여 이 값을 얻는 방법은?

나는 탐험하고 있었다.this.$el이 구조에서 이 값을 얻을 수 있는 해결책을 찾을 수 없음:

data: function () {
    return {
        lineHeight: null
    }
},
mounted(){
    this.lineHeight = ?
}

tl;dr

// with jQuery: $(this).css("line-height");
// with Vue:
mounted() {
    this.lineHeight = window.getComputedStyle(this.$el).getPropertyValue('line-height');
}

구성 요소가 다음과 같은 경우this.$el)는 iframe이나 팝업 내에 있을 수 있으며, 특히 주의하고 싶은 경우에는 계속 읽어보십시오.

JSFiddle 데모.

new Vue({
  el: '#app',
  data: {
    lineHeightTLDR: '',
    lineHeightFull: '',
  },
  mounted(){
      this.lineHeightTLDR = window.getComputedStyle(this.$el).getPropertyValue('line-height');
      this.lineHeightFull = this.css('line-height');
  },
  methods: {
    css(propertyName) {
      let view = this.$el.ownerDocument.defaultView;
      if ( !view || !view.opener ) {
        view = window;
      }
      let computed = view.getComputedStyle(this.$el);
      return computed.getPropertyValue(propertyName) || computed[propertyName];
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <pre>lineHeight tl;dr..: {{ lineHeightTLDR }}</pre>
  <pre>lineHeight full...: {{ lineHeightFull }}</pre>
</div>

배경

jQuery를 흉내내는 가장 간단한 방법은 jQuery의 근원을 살펴보는 것이다.반환 값.css()대략:

ret = computed.getPropertyValue( name ) || computed[ name ];

에 사용하는 것.computed. 그리고 다음과 같다.

return function( elem ) {
    var view = elem.ownerDocument.defaultView;
    if ( !view || !view.opener ) {
        view = window;
    }
    return view.getComputedStyle( elem );
}

보시다시피 반환되는 값은

ret = view.getComputedStyle(elem).getPropertyValue( name ) || view.getComputedStyle(elem)[name];

어디에view아마도window하지만 다른 것일 수도 있다 (elem.ownerDocument.defaultView).

결국, 만약 당신이 특별히 확신하고 매우 가까이 하고 싶다면.jQuery.css(), 사용:

// with jQuery: $(this).css("line-height");
// with Vue:
mounted(){
    this.lineHeight = this.css('line-height');
},
methods: {
  css(propertyName) {
    let view = elem.ownerDocument.defaultView;
    if ( !view || !view.opener ) {
      view = window;
    }
    let computed = view.getComputedStyle(this.$el);
    ret = computed.getPropertyValue(propertyName) || computed[propertyName];
  }
}

그러나 사용량이 iframes 또는 팝업에 의존하지 않는 경우(Vue 인스턴스 JavaScript 코드가 창에서 실행되고$el다른 에 첨부되어 있다), tl;dr 버전을 사용하십시오.

참조URL: https://stackoverflow.com/questions/49437955/alternative-for-jquery-css-in-vuejs