Vue動態(tài)獲取width的方法
更新時間：2018年08月22日 11:08:58 作者：zxzxdw
今天小編就為大家分享一篇Vue動態(tài)獲取width的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue里想用Bootstrap的進度條，
<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)文章
詳解win7 cmd執(zhí)行vue不是內(nèi)部命令的解決方法
這篇文章主要介紹了詳解win7 cmd執(zhí)行vue不是內(nèi)部命令的解決方法的相關(guān)資料,這里提供了解決問題的詳細步驟，具有一定的參考價值，需要的朋友可以參考下2017-07-07
這篇文章主要介紹了vue-cli3.0如何修改端口號，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項目實現(xiàn)會議預(yù)約功能(包含某天的某個時間段和某月的某幾天)
這篇文章主要介紹了vue項目實現(xiàn)會議預(yù)約功能(包含某天的某個時間段和某月的某幾天),本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
Vue中mixins的使用方法以及實際項目應(yīng)用指南
vue中提供了一種混合機制--mixins,用來更高效的實現(xiàn)組件內(nèi)容的復(fù)用,下面這篇文章主要給大家介紹了關(guān)于Vue中mixins的使用方法以及實際項目應(yīng)用指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue插值表達式和v-text指令的區(qū)別，{{}}這種語法叫做插值表達式，在插值表達式中可以寫任何合法的js表達式，下面來看看文章是怎么介紹該內(nèi)容的吧,需要的朋友可以參考一下2021-11-11
解決element-ui中Popconfirm氣泡確認框的事件不生效問題
這篇文章主要介紹了解決element-ui中Popconfirm氣泡確認框的事件不生效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
下面小編就為大家分享一篇vue axios 表單提交上傳圖片的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
通常我們的項目會越做越大,頁面也會越來越多,隨之而來的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護,下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細過程與跨域問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
構(gòu)建Vue大型應(yīng)用的10個最佳實踐(小結(jié))
這篇文章主要介紹了構(gòu)建Vue大型應(yīng)用的10個最佳實踐(小結(jié)),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細介紹了vue開發(fā)公共組件之返回頂部，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01