Vue動態(tài)獲取width的方法
更新時間：2018年08月22日 11:08:58 作者：zxzxdw
今天小編就為大家分享一篇Vue動態(tài)獲取width的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue里想用Bootstrap的進(jìn)度條，
<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>
主要是把style="width: 20%;"變成動態(tài)獲取的。
:style="'width:' + percent + '%'"
這樣寫就好了。
也可是這樣：
用vue 獲取動態(tài)元素的寬度。首頁，要放在this.$nextTick里面，其實要使用$el掛載此元素，下面貼代碼吧：
<el-input auto-complete="off" v-model="company.companyName" ref="companyStyle"></el-input>
先定義一個ref=companyStyle，我們來獲取此元素的寬度，
newAddBtn(){
let me = this;
this.$nextTick(function () {
me.inputStyWidth = me.$refs.companyStyle.$el.clientWidth + 'px';
})
這樣我們就獲取到了這個元素的寬度了。
以上這篇Vue動態(tài)獲取width的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue?innerHTML?綁定單擊事件不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了bing Map 在vue項目中的使用,需要的朋友可以參考下2018-04-04
Vant是一個強(qiáng)大的移動端組件庫,目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要為大家介紹vue3中的vant組件引入使用的方法,希望對大家有所幫助2023-10-10
Vue.js提供了簡潔、易于理解的API，幫助大家快速靈活掌握Vue.js。這篇文章主要介紹了如何在60分鐘內(nèi)輕松學(xué)習(xí)Vue.js，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了vue項目百度地圖如何自定義標(biāo)注marker問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中v-mode詳解以及具體的使用示例,在組件中使用?v-model?時,需要定義model選項,指定綁定的prop和事件,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
本文主要還是針對 Vue.js 2.x 版本，畢竟接下來一段時間，Vue.js 2.x 還是我們工作中的主流版本，對vue.js性能優(yōu)化技巧相關(guān)知識感興趣的朋友一起看看吧2021-09-09
vue項目中實現(xiàn)el-dialog組件可拖拽效果
本文主要介紹了vue項目中實現(xiàn)el-dialog組件可拖拽效果，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了nuxt.js 緩存實踐，nuxt 的緩存可以分為 組件級別緩存 , API級別緩存 以及 頁面級別緩存，本文就詳細(xì)的介紹了這三種緩存，感興趣的小伙伴們可以參考一下2018-06-06
element?ui中el-form-item的屬性rules的用法示例小結(jié)
這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-07-07