SoFunction
Updated on 2025-03-10

How to dynamically obtain width in Vue

In vue, I want to use Bootstrap's progress bar.

<div class="progress">
 <div class="progress-bar progress-bar-warning" role="progressbar"
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
  style="width: 20%;">
 <span class="sr-only">20%</span>
 </div>
</div>

Mainlystyle="width: 20%;"Become dynamically acquired.

:style="'width:' + percent + '%'"

Just write this way.

But this is also true:

Use vue to get the width of the dynamic element. The home page should be placed in this.$nextTick. In fact, you should use $el to mount this element. The following code is posted:

<el-input auto-complete="off" v-model="" ref="companyStyle"></el-input>

First define a ref=companyStyle, and we will get the width of this element.

newAddBtn(){
 let me = this;
 this.$nextTick(function () {
   = me.$.$ + 'px';
 
 })

In this way we get the width of this element.

The above method to obtain width dynamically in Vue is all the content I share with you. I hope you can give you a reference and I hope you can support me more.