vue.jsで幅を動的に設定する方法

幅を動的に設定する Vue.js メソッド: 1. スタイル バインディングを追加します; 2. 属性計算を追加します (例: [computed: {scrollerHeight: function() {return (window.innerHeight - 46 - 50))。 ..]。

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

実際の開発プロセスでは、特にバックグラウンド管理システムを開発する場合、幅や高さなどの動的に計算されたスタイルを使用することがよくあります。

要件シナリオ:

現在の携帯電話の画面の高さを取得し、コンテナー div のスクロール可能な領域の範囲を設定します。

具体的な実装:

1. スタイル バインディングを追加します

<div class="container" :style="{height: scrollerHeight}">
</div>

2. 属性計算を追加します

computed に属性計算を追加します。覚えておいてください、scrollerHeight はデータ内で宣言する必要はありません。

computed: {
    // 滚动区高度
    // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
    scrollerHeight: function() {
      return (window.innerHeight - 46 - 50) + 'px';
    }
  }

推奨学習:

php トレーニング

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