vue 在html标签内动态绑定样式的正确写法

最新推荐文章于 2025-01-09 14:02:32 发布

原创最新推荐文章于 2025-01-09 14:02:32 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在前端页面中动态展示设备位置布局的方法，通过使用div元素结合Vue.js的v-for指令，实现了设备在页面上的精准定位。同时，点击设备可触发状态查询功能，增强了用户交互体验。


<div v-for="item in equipmentList" :style="{'position':'absolute','top':item.offsetY*0.1522+'vh','left':item.offsetX*0.0732+'vw'}" @click="searchEquipmentStatus(item.name)"> 
</div>

equipmentList: [
    {offsetX: 30, offsetY: 50, name: '设备1'},
    {offsetX: 30, offsetY: 500, name: '设备2'},
    {offsetX: 760, offsetY: 50, name: '设备3'},
    {offsetX: 760, offsetY: 500, name: '设备4'},
    {offsetX: 400, offsetY: 300, name: '设备5'},
]