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

原创于 2019-07-04 11:54:46 发布

· 3.9k 阅读

0 ·

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<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'},
]