javascript - 样式绑定(bind)不适用于 HTML 图像元素 (Vue.js)

Question

在 Vue 中，我尝试对 HTML 图像元素的 CSS“top”属性使用样式绑定(bind):

<img src="../assets/myimg.png" id="myimg" v-bind:style="[!ended ? 'top:20%' : 'top:80%']">

这是图像的 CSS:

#myimg{
    position: absolute;
    width: 100px;
    height: 10px;
    left: 10%;
  }

“ended”只是该组件从其父组件接收的一个 prop。如果为假，则图像的“top”属性应为 20%，否则应为 80%。

不幸的是，无论“结束”是真还是假，图像都停留在同一位置。我该如何解决这个问题？

Answer 1

这是 Vue.js 中样式绑定(bind)的完整文档:

https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1

在您的情况下，您可以使用对象语法:

<img src="../assets/myimg.png" id="myimg" v-bind:style="{ top: !ended ? '20%' : '80%'}">

希望这对您有所帮助!