VUE项目中CSS设置动态宽度的方法

网上找到三种方法：

一、使用`cumputed`

首先你务必看Vue的官方文档。涉及到的基础知识有：
绑定内联样式的使用
computed的使用

文档写的都是基础使用。那么在项目实战中如何使用，两步就能实现，下面提供一个参考方案：
需求场景：获取当前手机屏幕高度，设置container div的可滚动区域范围。

step1: 添加样式绑定

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

step2: 添加属性计算

在computed里添加属性计算。记住 scrollerHeight 不需在data进行声明。
computed是啥？请看看computed的使用

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

参考：Vue如何设置动态宽度高度或者动态样式
（我自己用的这种方法，很可）

二、根据父容器设置宽度

如果根据父容器设置宽度，则可以将高度设置为0，并将填充-底部设置为百分比，该百分比将根据当前宽度计算：

.img-div {position: relative;width: 100%;height: 0;padding-bottom: 100%;img {position:absolute;top:0;left:0;width:100%;height:100%;}
}

这在所有主要浏览器中都能很好地工作。

参考：设置高度等于动态宽度（CSS方法）
（没有用过，仅记录）

三、`calc()`

css 中可以使用 calc() 来动态设置宽高，但是，在表达式中运算符的前后必须要有空格

height:calc(100vh - 80px)

VUE项目中CSS设置动态宽度的方法相关推荐

Vue项目中如何设置动态的TDK
TDK是什么 TDK就是网站的标题(title).描述(description)和关键词(keyword) TDK在哪里上面大佬对TDK的概念解释的很全面,但是在网页中的TDK在哪里呢,作为开发人员 ...
vue项目中css样式如何使用data中定义的动态变量
vue项目中css样式如何使用data中定义的动态变量直接上代码: 在这里是因为需要根据接口返回的数据控制对应父级盒子的高度以及子级盒子的宽度,所以需要用到动态样式.具体代码如下: <temp ...
java web配置dll文件_JavaWeb项目中dll文件动态加载方法解析（详细步骤）
相信很多做Java的朋友都有过用Java调用JNI实现调用C或C++方法的经历,那么Java Web中又如何实现DLL/SO文件的动态加载方法呢.今天就给大家带来一篇JAVA Web项目中DLL/SO ...
vue项目中 img标签加载失败方法，onerror事件的两种方法
vue项目中 img标签加载失败方法 ?css 第一种方法第二种方法本人写的第一篇文章,希望对你有帮助第一种方法 < img src="123" :οnerrοr=&q ...
Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法 this.$router.go(0) location.reload() 跳转空白页再跳回原页面使用provide / inject ...
vue项目中 npm使用淘宝镜像方法记录cnpm
vue项目中 npm使用淘宝镜像方法记录 cnpm安装 1,设置默认镜像地址 npm config set registry https://registry.npm.taobao.org 2,验证镜 ...
vue项目中如何设置ico图标
在vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题: 1.首先如何制作ico图标,本人使用的是比特虫在线制作ico图标,使用方法 ...
vue项目中运用webpack动态配置打包多种环境域名
在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-e ...
vue项目中使用Echarts 动态更改图表数据， Vue 折线图、柱状图等图表动态刷新，
问题:在vue组件中,用echarts插件动态获取.修改图表数据解决:已解决! 第一步:打开cmd命令窗口安装echarts依赖安装:npm install echarts -S 第二步:在m ...

VUE项目中CSS设置动态宽度的方法

一、使用`cumputed`

step1: 添加样式绑定

step2: 添加属性计算

二、根据父容器设置宽度

三、`calc()`

VUE项目中CSS设置动态宽度的方法相关推荐

最新文章

热门文章

VUE项目中CSS设置动态宽度的方法

一、使用cumputed

step1: 添加样式绑定

step2: 添加属性计算

二、根据父容器设置宽度

三、calc()

VUE项目中CSS设置动态宽度的方法相关推荐

最新文章

热门文章

一、使用`cumputed`

三、`calc()`