首页 >web前端 >Vue.js > 正文

vue.js如何动态设置宽度

原创2021-10-11 15:00:440450

vue.js动态设置宽度的方法:1、添加样式绑定;2、添加属性计算,例如【computed: {scrollerHeight: function() {return (window.innerHeight - 46 - 50)...】。

本文操作环境:windows10系统、vue.js 2.9、thinkpad t480电脑。

在实际开发过程中,我们会经常使用到动态计算的样式,比如宽度、高度等,特别是在开发后台管理系统的时候。

需求场景:

获取当前手机屏幕高度,设置container div的可滚动区域范围。

具体实现:

1、添加样式绑定

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

2、添加属性计算

在computed里添加属性计算。记住 scrollerHeight 不需在data进行声明。

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

推荐学习:php培训

以上就是vue.js如何动态设置宽度的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:vue.js 宽度
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • vue 3.0全新实战课程(2021版)第一季vue 3.0全新实战课程(2021版)第一季
  • vue 3.0全新实战课程(2021版)第二季vue 3.0全新实战课程(2021版)第二季
  • VuePress: 30分钟制作一个Vue静态网站VuePress: 30分钟制作一个Vue静态网站
  • VuePress: Vue 官方静态网站生成器极速指南VuePress: Vue 官方静态网站生成器极速指南
  • 视频教程分类