Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to dynamically set the width of vue.js", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to dynamically set the width of vue.js" this article.

Vue.js dynamic width setting method: 1, add style binding; 2, add attribute calculation, such as [computed: {scrollerHeight: function () {return (window.innerHeight-46-50).].

The operating environment of this paper: windows10 system, vue.js 2.9, thinkpad T480 computer.

In the actual development process, we will often use dynamic computing styles, such as width, height, etc., especially when developing background management systems.

Demand scenarios:

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

Specific implementation:

1. Add style bindings

2. Add attribute calculation

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

Computed: {/ / scroll area height / / (business requirements: mobile phone screen height minus the head title and bottom tabbar height, of course, these two heights can also be obtained dynamically) scrollerHeight: function () {return (window.innerHeight-46-50) + 'px';}} above are all the contents of the article "how to dynamically set the width of vue.js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.