Cara untuk menetapkan lebar secara dinamik dalam vue.js

Cara untuk menetapkan lebar secara dinamik dalam vue.js: 1. Tambah gaya mengikat; 2. Tambah pengiraan atribut, seperti [dikira: {scrollerHeight: function() {return (window.innerHeight - 46 - 50) ..].

Persekitaran pengendalian artikel ini: sistem windows10, vue.js 2.9, komputer thinkpad t480.

Dalam proses pembangunan sebenar, kami sering menggunakan gaya yang dikira secara dinamik, seperti lebar, ketinggian, dll., terutamanya apabila membangunkan sistem pengurusan bahagian belakang.

Senario keperluan:

Dapatkan ketinggian skrin telefon mudah alih semasa dan tetapkan julat kawasan boleh tatal div kontena.

Pelaksanaan khusus:

1. Tambah gaya mengikat

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

2. Tambah pengiraan atribut

Tambah pengiraan atribut dalam pengiraan. Ingat scrollerHeight tidak perlu diisytiharkan dalam data.

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

Pembelajaran yang disyorkan: latihan php

Atas ialah kandungan terperinci Cara untuk menetapkan lebar secara dinamik dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!