TL;博士

Question

我学习vuejs并试图在没有jquery的情况下完成所有工作

我需要获得一个css样式行高的值。在jquery我会做：

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

如何使用vuejs 2.5获取此值？

我在这个结构中正在探索this.$el，但无法找到解决方案来获取此值：

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

Answer 1

TL;博士

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

如果组件（this.$el）可能位于iframe或弹出窗口内，或者您需要格外小心，请继续阅读。

JSFiddle demo here.

＆＃13;

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];
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <pre>lineHeight tl;dr..: {{ lineHeightTLDR }}</pre>
  <pre>lineHeight full...: {{ lineHeightFull }}</pre>
</div>

＆＃13;

背景

模仿jQuery的最简单方法就是看看它的source。 .css()返回的值大致为：

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

在computed上使用CSSStyleDeclaration.getPropertyValue。 computed is：

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

使用Window.getComputedStyle()正如您所看到的，返回的值是：

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];
  }
}

但是如果你知道你的用法不依赖于iframe或弹出窗口（因为它是非常不寻常的Vue实例JavaScript代码在窗口运行并且$el它是附加到另一个），使用 tl; dr 版本。

vuejs中jquery css的替代方案

1 个答案:

TL;博士

背景