How to dynamically set width in vue.js

Vue.js method to dynamically set width: 1. Add style binding; 2. Add attribute calculation, for example [computed: {scrollerHeight: function() {return (window.innerHeight - 46 - 50). ..].

The operating environment of this article: windows10 system, vue.js 2.9, thinkpad t480 computer.

In the actual development process, we often use dynamically calculated styles, such as width, height, etc., especially when developing the background management system.

Requirement scenario:

Get the current mobile phone screen height and set the scrollable area range of the container div.

Specific implementation:

1. Add style binding

<div class="container" :style="{height: scrollerHeight}">
</div>

2. Add attribute calculation

Add attribute calculation in computed. Remember scrollerHeight does not need to be declared in data.

computed: {
    // 滚动区高度
    // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
    scrollerHeight: function() {
      return (window.innerHeight - 46 - 50) + 'px';
    }
  }

Recommended learning: php training

The above is the detailed content of How to dynamically set width in vue.js. For more information, please follow other related articles on the PHP Chinese website!