vue 动态获取浏览器内容高度并赋值给元素，并进行实时修改元素高度

在 vue 中，动态绑定 style 样式，可以使用：v-bind=: 或者 :style<template><div class="hello">　　<div :style="contentStyleObj"></div></div

qq_36437172

8490人浏览 · 2019-03-14 19:39:04

qq_36437172 · 2019-03-14 19:39:04 发布

在 vue 中，动态绑定 style 样式，可以使用：v-bind=: 或者 :style

<template>
  <div class="hello">
　　<div :style="contentStyleObj"></div> 
  </div>
</template>

获取浏览器的高度：

getHight(){
  this.contentStyleObj.height = window.innerHeight - 210 + 'px'
}

// data
contentStyleObj: {
  height: ''
}

在 created 生命周期中，调用且监听浏览器的变化：

created() {
  this.getHight()
  window.addEventListener('resize', this.getHight);
},
destroyed() {
  window.removeEventListener('resize', this.getHight)
},

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^