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 training

위 내용은 vue.js에서 너비를 동적으로 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!