video-06-vue获取dom实际属性

简介: video-06-vue获取dom实际属性

我们在vue开发中,有时候会遇到这种情况,需要获取dom元素实际属性,来做样式调整,以此来做适配



一、方法

在Vue中可以使用ref来获取一个真实的dom,也可以使用js原生,来获取dom节点

为了保险期间,所有的DOM操作建议都放在$nextTick() 方法中

二、代码

<template>
  <div class="box" ref="wrap"></div>
</template>
<script>
export default {
  mounted() {
    // 获取 DOM 元素
    this.$nextTick(()=>{
      let $ele = this.$refs.wrap
    })
  },
}
</script>
<style scoped>
  .box {
    width: 100%;
    height: 200px;
    background-color: pink;
  }
</style>

三、获取宽高

let $ele = this.$refs.wrap
// 宽
let width = $ele.offsetWidth
// 高
let height = $ele.offsetHeight
目录
相关文章
|
28天前
|
JavaScript API
Vue3中的计算属性能否动态修改
【9月更文挑战第5天】Vue3中的计算属性能否动态修改
75 10
|
6天前
|
缓存 JavaScript 前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
vue-day02计算属性,v-bind,v-if,v-for
|
6天前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
7天前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
19 0
前端基础(十)_Dom自定义属性(带案例)
|
8天前
如何在 Vue3 中创建一个计算属性?
如何在 Vue3 中创建一个计算属性?
19 1
|
14天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
28 2
|
28天前
|
JavaScript API
如何使用Vue3的可计算属性
【9月更文挑战第5天】如何使用Vue3的可计算属性
48 13
|
20天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
17 3
|
20天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
28 2
|
2月前
|
JavaScript 前端开发
vue获取元素属性
vue获取元素属性
41 3
下一篇
无影云桌面