vue 动态设置div的高度_Vue 动态设置元素高度

最新推荐文章于 2024-07-26 15:59:09 发布
最新推荐文章于 2024-07-26 15:59:09 发布
阅读量9.7k 收藏 1
点赞数
文章标签： vue 动态设置div的高度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40008920/article/details/114474018
版权
本文介绍了在Vue中如何动态设置div的高度，通过监听window的resize事件并在created和destroyed生命周期钩子中进行处理。示例代码展示了如何获取浏览器高度并计算后赋值给div的style样式。同时，文章还列举了window对象下与窗口尺寸相关的属性，如innerWidth、innerHeight等。
摘要由CSDN通过智能技术生成

1. Vue文件如下

let windowHeight = parseInt(window.innerHeight)

export default {

data() {

return {

windowHeight: windowHeight,

autoHeight: {

height: ''

},

}

},

methods: {

getHeight() {

this.autoHeight.height = (windowHeight - 110) + 'px';

},

},

created() {

window.addEventListener('resize', this.getHeight)

this.getHeight()

},

destroyed() {

window.removeEventListener('resize', this.getHeight)

}

}

2. 说明

给div动态绑定style样式， 如autoHeight

获取浏览器高度后，经过计算后赋值

let windowHeight = parseInt(window.innerHeight)

export default {

data() {

return {

windowHe

最低0.47元/天 解锁文章
weixin_40008920
关注
vue动态设置div的宽高可以调节_vue中实现左右，上下拖动，改变div宽高
weixin_30923011的博客
12-30 7639
先按照同学写的例子，是左右拖动的改一下，需要搞清楚的是 css 布局的内容。参考文章链接：https://www.jianshu.com/p/014380e6ae50温习盒子模型中的布局模型：主要是层模型1.基本概念：CSS包含3种基本的布局模型：流动模型(Flow)、浮动模型 (Float) 和层模型(Layer)。2.流动模型(Flow)：流动(Flow)是默认的网页布局模式。也就是说网页在默...
如何动态设置vue组件的宽度和高度?
bydfguifd的博客
01-08 6634
动态设置vue组件的宽高
#vue#获取浏览器视窗，动态修改div高度（附源码）
ZHENGCHUNJUN的博客
07-23 1868
#vue#根据视窗，动态修改div高度（附源码）
vue3获取、设置元素高度
最新发布
DN金猿的博客
07-26 2143
以上就是傻喵使用vue3来操作元素高度的总结，还有很多坑点需要去研究。也欢迎各位大大在评论区留言，指点一下。vue3获取、设置元素高度 - 掘金 (juejin.cn)
vue 动态设置div的高度 动态设置元素高度
冰冰酱
03-23 2017
【代码】vue 动态设置div的高度 动态设置元素高度。
vue中动态设置内外div的布局，键盘弹出时动态变高度
qq_33007465的博客
08-13 1934
一、键盘弹起时页面局部异常问题。 <template> <div id="div1" class="result" ref="container" > <div id="div2" :style="{marginTop: marginTop}"> <van-sticky :container="container" > 页面内容 </van-stick
JS 获取当前屏幕大小
伊凡个人博客
01-13 396
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全...
python绝对方向角度值_重学前端：相对定位VS绝对定位VS固定定位
weixin_39575502的博客
12-10 947
position 是CSS中非常重要的属性，顾名思义，他是用来指定一个元素在页面上的位置，搞懂了position的属性值对布局的理解会更加透彻。position一共有5个值，分别是：staticrelativefixedabsolutestickystatic 是 position 的默认值，如果元素没有指定position，那么他的值就是默认的static定位。他会按照正常的文档流从上到下，从左...
div设置高度 vue_（三）vue常用指令，数据绑定
weixin_36377930的博客
12-13 886
1、v-text和v-htmlv-XXX可以直接使用vue中的参数，text显示文本格式，html可以识别html标签<div id="app"> <div> <div v-text='bbb'></div> <div v-html='bbb'></div> </div...
vue动态设置页面title的方法实例
12-28
本文主要介绍了Vue动态修改title的方法，需要的朋友可以参考学习，方法如下： 1.通过自定义指令去修改（单个修改比较好） //1.在main.js 页面里添加自定义指令 Vue.directive('title', {//单个修改标题 inserted: ...
js vue 创建一个div_如何用vue动态的添加与生成元素？
weixin_39697660的博客
12-19 2926
思路就是用数组配和v-for就行了html布局//控制input框个数的input框@blur="createInp"style="width: 200px">//指定个数的input框:key="idx"v-model="inpArr[idx]"style="width: 120px;margin: 0 5px">创建Div//div生成class="img-box">clas...
vue如何获取div的宽度_vue 动态获取div宽高有时候为0的情况
weixin_39801613的博客
12-19 3427
项目背景：需要使用echarts进行图表展示。由于div宽高是不固定的，因此需要先获取父级的宽高再把值赋予到图表的div中。需要使用this.$nextTick(() => { });方法，在mounted中，保证DOM渲染完全后，在进行echarts初始化。import echarts from 'echarts';export default {name: "wifiCollec...
vue中textarea高度的设置_vue-textarea 自适应高度
weixin_39644915的博客
12-20 2132
需求简介一个搜索页面，上面输入框，下面列表展示搜索到的结果。重点是：产品要求搜索框默认显示一行，当输入的文字超过一行时，输入框的高度会随着改变，直到输入完毕。解决思路设想本想利用textarea实现，但textarea不支持自适应高度，而是定好高度或者是行数之后，超出部分就会显示滚动条。只能另想。根据需求，首先想到了张鑫旭伪类匹配列表数目实现微信群头像CSS布局的技巧一文提到的文字多字号自动变小的...
vue踩坑之路--点击按钮改变div样式
alexhunter2010的博客
03-30 2003
有时候，我们在做项目的时候，想通过某个按钮来改变某个div样式，那么可以通过以下代码实现： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
vue中css样式中使用data里面的数据,动态设置元素高度
meimeib的博客
07-19 2735
需求 vue中css样式中使用data里面的数据,动态设置元素高度 用法 <template> <div class="box" :style="{ '--heightLine': heightLine + 'px' }"></div> </template> <script> export default { data() { return { height:42 }; } }; </script>
vue 动态获取浏览器内容高度并赋值给元素，并进行实时修改元素高度
qq_36437172的博客
03-14 8426
在 vue 中，动态绑定 style 样式，可以使用：v-bind=: 或者 :style &lt;template&gt; &lt;div class="hello"&gt; 　　&lt;div :style="contentStyleObj"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/template&gt; 获取浏览器的高度：
windowHeight使用
weixin_47948392的博客
10-12 191
uni.getSystemInfoSync().windowHeight获取高度有时不对 改在onReady 获取高度，onShow、onLoad 等生命周期页面未完全初始化完毕，获取到的窗口高度值并非最新
vue 获取 div 高度
热门推荐
aithena的博客
11-27 1万+
<div ref=""jo></div> // 常规模型 var height = this.$refs.jo.offsetHeight; // 获取元素样式值,element 为元素ref="jo" var heightCss = window.getComputedStyle(this.$refs.jo).height; // 100px // 获取元素内联样式...
vue获取div高度
yuyu_2019的博客
01-22 7771
<div class="top" ref="top"> mounted () { let topHeight = this.$refs.top.offsetHeight // 头部高度 console.log(topHeight) }
vue 动态设置div的高度_vue 动态设置title标题
05-25
1. Vue 动态设置 div 的高度： 可以使用 Vue 的计算属性和 style 绑定来动态设置 div 的高度。假设我们有一个 data 属性 height，代表 div 的高度，可以这样实现： ``` <template> <div :style="{height: divHeight}">Hello, world!</div> </template> <script> export default { data() { return { height: 100 // 初始高度 } }, computed: { divHeight() { return this.height + 'px' // 拼接单位 } } } </script> ``` 当 height 属性改变时，div 的高度也会随之改变。 2. Vue 动态设置 title 标题： 可以使用 Vue 的生命周期函数 mounted，动态设置 document.title 属性。假设我们有一个 data 属性 title，代表标题，可以这样实现： ``` <template> <div>Hello, world!</div> </template> <script> export default { data() { return { title: 'My App' // 初始标题 } }, mounted() { document.title = this.title } } </script> ``` 当 title 属性改变时，标题也会随之改变。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值