vuejs2 - vuejs(2)样式绑定(bind)top/left属性

Question

我正在尝试将 json 对象中的两个样式属性绑定(bind)到 html 中的元素。我尝试过使用以各种方式编写的像素和百分比(我意识到下面显示的像素坐标与 % 坐标放置某些内容的位置不匹配，这只是一个示例)。

{左:30 + 'px'，顶部:25 + 'px'} {左:'30px'，顶部:'25px'}

{左:30 + '%'，上:25 + '%'} {左:'30%'，上:'25%'}

我的绑定(bind)方式如下:`v-bind:style="objnamehere"

当我重新加载页面时，该元素未定位在这些位置。我不确定我做错了什么。其中之一应该可以根据此处的官方示例进行工作:https://v2.vuejs.org/v2/guide/class-and-style.html

Answer 1

就我而言，工作如下:

<div class="caption-text" :style="{top:y + 'px',left:x+'px'}">

Y 和 X 是我的 Vue 组件中的 props

'top' 和 'left' 是 CSS 属性

希望对大家有帮助