欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue動(dòng)態(tài)獲取width的方法

 更新時(shí)間:2018年08月22日 11:08:58   作者:zxzxdw  
今天小編就為大家分享一篇Vue動(dòng)態(tài)獲取width的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

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%;"變成動(dòng)態(tài)獲取的。

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

這樣寫就好了。

也可是這樣:

用vue 獲取動(dòng)態(tài)元素的寬度。首頁,要放在this.$nextTick里面,其實(shí)要使用$el掛載此元素,下面貼代碼吧:

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

先定義一個(gè)ref=companyStyle,我們來獲取此元素的寬度,

newAddBtn(){
 let me = this;
 this.$nextTick(function () {
  me.inputStyWidth = me.$refs.companyStyle.$el.clientWidth + 'px';
 
 })

這樣我們就獲取到了這個(gè)元素的寬度了。

以上這篇Vue動(dòng)態(tài)獲取width的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue?innerHTML?綁定單擊事件不生效的解決

    vue?innerHTML?綁定單擊事件不生效的解決

    這篇文章主要介紹了vue?innerHTML?綁定單擊事件不生效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • bing Map 在vue項(xiàng)目中的使用詳解

    bing Map 在vue項(xiàng)目中的使用詳解

    這篇文章主要介紹了bing Map 在vue項(xiàng)目中的使用,需要的朋友可以參考下
    2018-04-04
  • Vue3中引入使用vant組件的教程詳解

    Vue3中引入使用vant組件的教程詳解

    Vant是一個(gè)強(qiáng)大的移動(dòng)端組件庫,目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要為大家介紹vue3中的vant組件引入使用的方法,希望對(duì)大家有所幫助
    2023-10-10
  • Vue.js 60分鐘輕松入門

    Vue.js 60分鐘輕松入門

    Vue.js提供了簡潔、易于理解的API,幫助大家快速靈活掌握Vue.js。這篇文章主要介紹了如何在60分鐘內(nèi)輕松學(xué)習(xí)Vue.js,感興趣的小伙伴們可以參考一下
    2016-11-11
  • vue項(xiàng)目百度地圖如何自定義標(biāo)注marker

    vue項(xiàng)目百度地圖如何自定義標(biāo)注marker

    這篇文章主要介紹了vue項(xiàng)目百度地圖如何自定義標(biāo)注marker問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue中v-mode詳解及使用示例詳解

    vue中v-mode詳解及使用示例詳解

    這篇文章主要介紹了vue中v-mode詳解以及具體的使用示例,在組件中使用?v-model?時(shí),需要定義model選項(xiàng),指定綁定的prop和事件,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2024-03-03
  • Vue.js性能優(yōu)化N個(gè)技巧(值得收藏)

    Vue.js性能優(yōu)化N個(gè)技巧(值得收藏)

    本文主要還是針對(duì) Vue.js 2.x 版本,畢竟接下來一段時(shí)間,Vue.js 2.x 還是我們工作中的主流版本,對(duì)vue.js性能優(yōu)化技巧相關(guān)知識(shí)感興趣的朋友一起看看吧
    2021-09-09
  • vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果

    vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果

    本文主要介紹了vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • nuxt.js 緩存實(shí)踐

    nuxt.js 緩存實(shí)踐

    這篇文章主要介紹了nuxt.js 緩存實(shí)踐,nuxt 的緩存可以分為 組件級(jí)別緩存 , API級(jí)別緩存 以及 頁面級(jí)別緩存,本文就詳細(xì)的介紹了這三種緩存,感興趣的小伙伴們可以參考一下
    2018-06-06
  • element?ui中el-form-item的屬性rules的用法示例小結(jié)

    element?ui中el-form-item的屬性rules的用法示例小結(jié)

    這篇文章主要介紹了element?ui中el-form-item的屬性rules的用法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
    2024-07-07

最新評(píng)論