Comment définir dynamiquement la largeur dans vue.js

Méthode Vue.js pour définir dynamiquement la largeur : 1. Ajouter une liaison de style ; 2. Ajouter un calcul d'attribut, tel que [calculé : {scrollerHeight : function() {return (window.innerHeight - 46 - 50)...].

L'environnement d'exploitation de cet article : système windows10, vue.js 2.9, ordinateur thinkpad t480.

Dans le processus de développement actuel, nous utilisons souvent des styles calculés dynamiquement, tels que la largeur, la hauteur, etc., en particulier lors du développement du système de gestion backend.

Scénario requis :

Obtenez la hauteur actuelle de l'écran du téléphone mobile et définissez la plage de zone de défilement du div du conteneur.

Implémentation spécifique :

1. Ajouter une liaison de style

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

2. Ajouter un calcul d'attribut

Ajouter un calcul d'attribut dans le calcul. N'oubliez pas que scrollerHeight n'a pas besoin d'être déclaré dans les données.

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

Apprentissage recommandé : formation php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!