ホームページ > ウェブフロントエンド > Vue.js > vue.js で要素の高さを動的に設定する方法

vue.js で要素の高さを動的に設定する方法

王林
リリース: 2021-10-09 17:42:21
オリジナル
5481 人が閲覧しました

要素の高さを動的に設定する

vue.js メソッド: [<div :style="{width: divWidth, height: divHeight}"></div>data() {//Storing data} 】。

vue.js で要素の高さを動的に設定する方法

#この記事の動作環境: Windows10 システム、vue.js 2.9、thinkpad t480 コンピューター。

早速、次のコードに直接進みましょう:

vue code:

<div :style="{width: divWidth, height: divHeight}"></div>
ログイン後にコピー

data data:

data() {
    //这里存放数据
    return {
        divHeight:0,
        divWidth:0
    }
},
ログイン後にコピー

createdメソッドの割り当て

created(){
    let divWidth = document.body.clientWidth+"px";
    let divHeight = document.body.clientHeight-130+"px";
    this.divWidth = divWidth
    this.divHeight = divHeight
},
ログイン後にコピー

推奨される学習:

php トレーニング #

以上がvue.js で要素の高さを動的に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート